如何將.nextElementSibling應用于下拉選單的下一項-有解無憂

我有一個包含子專案的選單，當我單擊它們時，它會彈出顯示這些專案。我設法打開了第一個專案，但我不能對第二個做同樣的事情。我正在嘗試使用.nextElementSibling它，但我不能。我究竟做錯了什么？

var dropdownBtn = document.querySelector('.menu-btn');

dropdownBtn.addEventListener('click',()=>{
var menuContent = document.querySelector('.drop_container');
    menuContent.classList.toggle("show");
  
})

.menu-btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.menu-btn:hover {
  background: #000;
  color: #fff;
}


.drop_container {
   display: none;
   background-color: #017575;
   transition: 0.3s;
   opacity: 0;
}

.drop_container.show {
  display: contents;
  visibility: visible;
  opacity: 1;
}

.drop_container > .item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<div class="dropdown-menu">

<div class="menu-btn">One</div>
<div class="drop_container">
  <a class="item" href="#">Contact Us</a>
  <a class="item" href="#">Visit Us</a>
</div>

<div class="menu-btn">Two</div>
<div class="drop_container">
  <a class="item" href="#">Contact Us</a>
  <a class="item" href="#">Visit Us</a>
</div> 

</div>

uj5u.com熱心網友回復：

在 NodeList 中收集每個.menu-btn，然后使用.forEach().
在每次迭代中參考menuContentas this.nextElementSibling。
this是.menu-btn那個用戶點擊的，為了使用this不要使用箭頭功能。如果您更喜歡箭頭函式，請使用等效項（在這種情況下）e.target代替this.

const dropdownBtn = document.querySelectorAll('.menu-btn');

dropdownBtn.forEach(btn => btn.addEventListener('click', function() {
  const menuContent = this.nextElementSibling;
  menuContent.classList.toggle("show");
}));

.menu-btn {
  background: #e0e0e0;
  padding: 10px;
  margin: 5px 0px 0px 0px;
}

.menu-btn:hover {
  background: #000;
  color: #fff;
}

.drop_container {
  display: none;
  background-color: #017575;
  transition: 0.3s;
  opacity: 0;
}

.drop_container.show {
  display: contents;
  visibility: visible;
  opacity: 1;
}

.drop_container>.item {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  padding: 10px 0px 0px 0px;
}

<div class="dropdown-menu">

  <div class="menu-btn">One</div>
  <div class="drop_container">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

  <div class="menu-btn">Two</div>
  <div class="drop_container">
    <a class="item" href="#">Contact Us</a>
    <a class="item" href="#">Visit Us</a>
  </div>

</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/479688.html

標籤：javascript html css 菜单项物品控制

上一篇：將滑鼠懸停在其他元素上時更改元素的背景顏色（緩慢）

下一篇：僅在單擊確切的類和資料ID時起作用