4/12 JavaScriptでプルダウンメニューの実装

本日は簡単なプルダウンメニューの実装を行ったので、忘備録として記録します。

 

やりたいことはボタンクリックでメニューの表示、非表示を行う。

・あらかじめ

  表示用のクラスと対応するCSSプロパティ

  非表示用のクラスと対応するCSSプロパティを記述しておく。

・ボタンをクリックするとイベント発火

・表示したい要素にクリックの度に表示用のクラス名を追加して、削除してを繰り返す。

 

発火要素.addEventListener("click", () => {
表示要素.classList.toggle("hidden");
});