下拉菜單 html css javascript

Question

如果有人可以幫忙嗎？ 代碼有什么問題：/我正在嘗試制作一個下拉菜單，但 javascript 代碼有問題。

收到此錯誤：main.js: 9 Uncaught TypeError: 無法在 HTMLAnchorElement 處讀取未定義的屬性（讀取“添加”）。 (main.js:9)

它說問題在於添加 add class on sidebarUl.classList.add('show');

 const sidebarBtn = document.querySelectorAll('.sidebar-btn'); const sidebarUl = document.querySelectorAll('.sidebar-ul'); sidebarBtn.forEach((btn) => btn.addEventListener('click', function (e) { const clicked = e.target; console.log(clicked); if (clicked) { sidebarUl.classList.add('show'); } else { sidebarUl.classList.remove('show'); } }) );

 .shop-sidenav { position: fixed; width: 20%; height: 100%; }.sidebar ul { height: 100%; width: 100%; }.sidebar ul li { line-height: 60px; border-bottom: 1px solid var(--primary-color); }.sidebar ul li a { padding-left: 2rem; display: block; width: 100%; border-left: 1 px solid var(--primary-color); }.sidebar ul li a:hover { color: var(--secondery-color); }.sidebar ul li a span { float: right; color: var(--secondery-color); transition: transform 0.3s; }.sidebar ul li a:active span { transform: rotate(-180deg); }.sidebar ul ul { position: static; display: none; }.sidebar-ul.show { display: block; }.sidebar ul ul li { border-bottom: none; line-height: 40px; }.sidebar ul ul li a { color: var(--secondery-color); padding-left: 4rem; }

 <nav class="sidebar"> <div class="shop-sidenav"> <ul> <li> <a href="#" class="sidebar-btn">Bikes<span>&#11167;</span></a> <ul class="sidebar-ul"> <li><a href="#">Giant</a></li> <li><a href="#">Piaggio</a></li> <li><a href="#">Trek</a></li> <li><a href="#">Scoot</a></li> <li><a href="#">Canyon</a></li> <li><a href="#">Cube</a></li> </ul> </li> <li> <a href="#" class="sidebar-btn">Clothing <span>&#11167;</span></a> <ul class="sidebar-ul"> <li><a href="#">Enduro</a></li> <li><a href="#">Scoot</a></li> <li><a href="#">Fox</a></li> </ul> </li> <li><a href="#">Accessories</a></li> <li> <a href="#" class="sidebar-btn">Components<span>&#11167;</span></a> <ul class="sidebar-ul"> <li><a href="#">Wheels</a></li> <li><a href="#">Chain</a></li> <li><a href="#">Gears</a></li> <li><a href="#">Brakes</a></li> <li><a href="#">Pumps</a></li> <li><a href="#">Amortizers</a></li> </ul> </li> </ul> </div> </nav>

Answer 1

document.querySelectorAll返回一個節點列表。 所以在添加 class show到 sidebarUl 時，你需要指定你需要添加到哪個元素。 forEach循環給你一個索引，你可以用它來實現

  const sidebarBtn = document.querySelectorAll(".sidebar-btn");
  const sidebarUl = document.querySelectorAll(".sidebar-ul");

  sidebarBtn.forEach((btn,index) =>
    btn.addEventListener("click", function (e) {
        sidebarUl.forEach(ul=>{
            ul.classList.remove("show")
        })
        sidebarUl[index].classList.add("show");
    })
  );