ドロップダウンメニュー（クリック開閉）
このドロップダウンメニューは、ボタンをクリックすると下に展開し、メニュー外をクリックすると自動で閉じる定番のUIです。短いJavaScriptで開閉を制御しており、トリガーのクリックでは classList.toggle で表示を切り替え、 stopPropagation でその場のクリックが「外側クリック」と誤認…
解説
このドロップダウンメニューは、ボタンをクリックすると下に展開し、メニュー外をクリックすると自動で閉じる定番のUIです。短いJavaScriptで開閉を制御しており、トリガーのクリックでは classList.toggle で表示を切り替え、stopPropagation でその場のクリックが「外側クリック」と誤認されないようにしています。ドキュメント全体に貼った click イベントが、メニュー外を押したときの自動クローズを担当します。表示・非表示は opacity と transform のトランジションで滑らかに切り替わります。
こんなときに便利
- 一覧の各行に置く「編集・複製・削除」などの操作メニュー
- SaaS のヘッダーにある設定・アカウントメニュー
- 限られた場所に多くの操作をまとめたいツールバー
カスタマイズは、メニュー幅の min-width や影の濃さ、項目の余白が中心です。<hr> で区切った「削除」は赤系の色で危険な操作だと示すと親切です。複数のドロップダウンを同じ画面に置く場合は id を分けてください。キーボード操作にも対応させるなら、Esc キーで閉じる処理や aria-expanded の付与を足すとアクセシビリティが向上します。
よくある質問
同じページに複数のドロップダウンを置けますか？
置けます。ただし JavaScript が id でひとつの要素を取得しているため、要素ごとに id を変え、それぞれに対して同じ初期化処理を行ってください。クラスを使ってまとめて初期化する形に書き換えるのも有効です。
メニュー外をクリックすると閉じるのはなぜですか？
document 全体にクリックイベントを設定し、押されたら開いた状態のクラスを外しているためです。トリガー側で stopPropagation を呼んでいるので、ボタン自身のクリックでは閉じず、外側を押したときだけ閉じます。