是否可以创建一个控制多个下拉菜单的 javascript

Is it possible to create one javascript that controls multiple dropdown menus?

本文关键字：控制 下拉菜单 javascript 一个 创建 是否      更新时间：2023-09-26

我创建了一个非常简单的javascript：

function dropdownFunction() {
  document.getElementById("dropdown").classList.toggle("show");
}

使用以下 HTML：

<div class="dropdown">
  <button onclick="dropdownFunction()" class="dropbtn">Dropdown</button>
  <div id="dropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

但是，当我使用相同的HTML代码创建第二个下拉按钮时，正如您所期望的那样，单击它会打开第一个按钮下拉菜单。我想知道是否可以修改该脚本，以便我可以对所有下拉列表使用该功能，而不是必须为我在网站上使用的每个下拉按钮创建新函数。

当然。调用函数时，传递对单击的元素的引用：

onclick="dropdownFunction.call(this)"

。然后在函数中使用该引用查找适当的div：

this.parentNode.querySelector(".dropdown-content").classList.toggle("show");

以下是上述内容在上下文中的工作演示：

function dropdownFunction() {
  this.parentNode.querySelector(".dropdown-content").classList.toggle("show");
}
.dropdown-content {
  display: none;
}
.show {
  display: block;
}
<div class="dropdown">
  <button onclick="dropdownFunction.call(this)" class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
<div class="dropdown">
  <button onclick="dropdownFunction.call(this)" class="dropbtn">Dropdown 2</button>
  <div class="dropdown-content">
    <a href="#">Link A</a>
    <a href="#">Link B</a>
    <a href="#">Link C</a>
  </div>
</div>

相关文章：