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

Posted 2023-05-09

【中文标题】使用 JS 切换每个框的下拉列表

【英文标题】：Toggle dropdown for each box with JS

【发布时间】：2021-05-18 11:08:27

【问题描述】：

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

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 时，它不起作用..

【问题讨论】：

document.querySelector(".dropdown") 是单数，所以只选择一个元素

这能回答你的问题吗？ querySelector and querySelectorAll vs getElementsByClassName and getElementById in javascript

@freedomn-m 是的 :) 谢谢大家，你的帮助很大，这个社区真是太好了

【参考方案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>

【参考方案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>

【参考方案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>

【讨论】：

我强烈建议委托