使用 JS 切换每个框的下拉列表

Question

我想切换每个框的下拉列表，但由于某种原因，只有第一个框可见：

const button = document.querySelector("button");
const dropdown = document.querySelector(".dropdown");

button.addEventListener("click", () => {
  dropdown.classList.toggle("dropdown-visible");
})

.box {  
  height: 100px;
  width: 300px;
  position: relative;
}

.dropdown {
  height: 100px;
  width: 100%;
  position: absolute;
  background: red;
  top: 100%;
  right: 0;
  display: none;
}

.dropdown-visible {
  display: block;
}

<div class="box">
  box 1
  <button>toggle</button>
  <div class="dropdown">dropdown content</div>
</div>
<div class="box">
  box 2
  <button>toggle</button>
  <div class="dropdown">dropdown content</div>
</div>
<div class="box">
  box 3
  <button>toggle</button>
  <div class="dropdown">dropdown content</div>
</div>

我想我应该遍历这些，但是当我尝试 querySelectorAll 时，它不起作用..

Answer 1

点击按钮时，使用被点击元素的nextElementSibling 导航到相关下拉列表：

for (const button of document.querySelectorAll('button')) {
  button.addEventListener('click', (e) => {
    button.nextElementSibling.classList.toggle("dropdown-visible");
  });
}

.box {  
  height: 100px;
  width: 300px;
  position: relative;
}

.dropdown {
  height: 100px;
  width: 100%;
  position: absolute;
  background: red;
  top: 100%;
  right: 0;
  display: none;
}

.dropdown-visible {
  display: block;
}

<div class="box">
  box 1
  <button>toggle</button>
  <div class="dropdown">dropdown content</div>
</div>
<div class="box">
  box 2
  <button>toggle</button>
  <div class="dropdown">dropdown content</div>
</div>
<div class="box">
  box 3
  <button>toggle</button>
  <div class="dropdown">dropdown content</div>
</div>

Answer 2

代表团

document.getElementById("container").addEventListener("click", e => {
  const tgt = e.target;
  if (tgt.tagName==="BUTTON") {
    tgt.nextElementSibling.classList.toggle("dropdown-visible");
  }
})

.box {  
  height: 100px;
  width: 300px;
  position: relative;
}

.dropdown {
  height: 100px;
  width: 100%;
  position: absolute;
  background: red;
  top: 100%;
  right: 0;
  display: none;
}

.dropdown-visible {
  display: block;
}

<div id="container">
<div class="box">
  box 1
  <button>toggle</button>
  <div class="dropdown">dropdown content</div>
</div>
<div class="box">
  box 2
  <button>toggle</button>
  <div class="dropdown">dropdown content</div>
</div>
<div class="box">
  box 3
  <button>toggle</button>
  <div class="dropdown">dropdown content</div>
</div>
</div>

一键循环

const button = document.querySelector("button");// only one button
const dropdowns = document.querySelectorAll(".dropdown");

button.addEventListener("click", () => {
  dropdowns.forEach(dropdown => dropdown.classList.toggle("dropdown-visible"));
})

.box {
  height: 100px;
  width: 300px;
  position: relative;
}

.dropdown {
  height: 100px;
  width: 100%;
  position: absolute;
  background: red;
  top: 100%;
  right: 0;
  display: none;
}

.dropdown-visible {
  display: block;
}

<button>toggle</button>
<div class="box">
  box 1
  <div class="dropdown">dropdown content</div>
</div>
<div class="box">
  box 2

  <div class="dropdown">dropdown content</div>
</div>
<div class="box">
  box 3

  <div class="dropdown">dropdown content</div>
</div>

Answer 3

这应该有帮助！

const buttons = document.querySelectorAll("button");
const dropdowns = document.querySelectorAll(".dropdown");

buttons.forEach((btn, index) => {
  btn.addEventListener("click", () => {
    dropdowns[index].classList.toggle("dropdown-visible");
  })
})

.box {
  height: 100px;
  width: 300px;
  position: relative;
}

.dropdown {
  height: 100px;
  width: 100%;
  position: absolute;
  background: red;
  top: 100%;
  right: 0;
  display: none;
}

.dropdown-visible {
  display: block;
}

<div class="box">
  box 1
  <button>toggle</button>
  <div class="dropdown">dropdown content</div>
</div>
<div class="box">
  box 2
  <button>toggle</button>
  <div class="dropdown">dropdown content</div>
</div>
<div class="box">
  box 3
  <button>toggle</button>
  <div class="dropdown">dropdown content</div>
</div>