时间戳

首页 > 解决方案 > Java 脚本代码仅适用于第一个按钮？

javascript - Java 脚本代码仅适用于第一个按钮？

问题描述

我试图用按钮实现一个导航栏，它的功能是下拉列表。事件监听器正在工作，但无论我单击哪个按钮，它都只会打开第一个按钮的内容。

这是我的代码：

for (let i = 0; i < 5; ++i) {
  const bnts = document.getElementsByClassName("dropbutton");
  bnts[i].addEventListener("click", showAndHide);

}

function showAndHide() {
  var click = document.getElementsByClassName("drop-content")[0];

  if (click.style.display === "none") {
    click.style.display = "block";
  } else {
    click.style.display = "none";
  }
};
<div class="dropdown">
  <button id="button1" class="dropbutton">Home</button>
  <div class="drop-content">
    <a href="#">Test1</a>
    <a href="#">Test2</a>
    <a href="#">Test3</a>
  </div>

  <button id="button1" class="dropbutton">Arrivals</button>
  <div class="drop-content">
    <a href="#">Test111</a>
    <a href="#">Test222</a>
    <a href="#">Test3</a>
  </div>

  <button id="button1" class="dropbutton">Clothing</button>
  <div class="drop-content">
    <a href="#">Test1123</a>
    <a href="#">Test212</a>
    <a href="#">Test3</a>
  </div>

  <button id="button1" class="dropbutton">Schoes</button>
  <div class="drop-content">
    <a href="#">Test1</a>
    <a href="#">Testaasdf2</a>
    <a href="#">Test3</a>
  </div>
</div>

标签： javascripthtmldomdom-manipulation

解决方案

使用https://developer.mozilla.org/en-US/docs/Web/API/Event/target

function showAndHide(event){
   var click = event.target;

推荐阅读