ホームページメニューの作成(ブログは参考まで~)

ブログは参考までにすべきです.
J QUEで活动する方法しか勉强していないので...
バニラで表現するので、何かわかりませんが…茫然としたから...検索してみました.
最初は繰り返し文として使用し、windowを直接操作します.

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

 it```
코드를 입력하세요

window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}コードを入力してください
参考にして書いてみます.いずれにしてもdomを直接操作しない方法で、私のコードはもっときれい(?)最近(?)とても作りたいです.だから2回目の検索で見つけた.

const button = document.querySelector('.button');

button.addEventListener('click', () => {
  const dropdown = document.querySelector('.dropdown');
  dropdown.style.display = 'block';
});

button.addEventListener('blur', () => {
  const dropdown = document.querySelector('.dropdown');
  dropdown.style.display = '';
});

もともとそうしていたのですが、クラスに指定された複数の項目(メニューリスト)を呼ばざるを得ませんでした.
querySelector Allをしなければなりません.最終的にはNoteListの問題を繰り返します.
△私も言葉で正しいかどうか分かりません.

const dropdowns = document.querySelectorAll(".main-menu");

上のコードのように、イベントリスナーにずっと配置されます.

"use strict"; 

const menu = document.querySelector(".button");
const dropdowns = document.querySelectorAll(".main-menu");

menu.addEventListener("click",()=>{
    for(const dropdown of dropdowns){
        dropdown.style.display="block";
    }
});

最終的には、グローバル範囲で変数を作成して使用する場合は、再利用の観点からコードを長時間作成する必要はありません...これは一日のシャベルの結果です.