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

Question

我创建了一个非常简单的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 代码创建第二个下拉按钮时，单击它会打开第一个按钮下拉菜单。我想知道是否可以修改该脚本，以便我可以将该功能用于所有下拉菜单，而不是为我在网站上使用的每个下拉按钮创建新功能。

Answer 1

当然。当您调用该函数时，传递对被点击元素的引用：

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>