我试图实现一个带有按钮的导航栏，它起到下拉列表的作用。 事件侦听器正在工作，但无论单击哪个按钮，它都只打开第一个按钮的内容。
下面是我的代码:
null
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>null
使用https://developer.mozilla.org/en-us/docs/web/api/event/target
function showAndHide(event){
var click = event.target;
首先，您不止一次使用同一个ID。 这在HTML中是不允许的。 ID必须是唯一的。 您使用的是GetElementsByClassName[0]，它总是返回带有该类的第一个元素。 因为drop-content总是直接出现在按钮后面，所以您可以选择单击的按钮，然后通过调用NexTelementSibling获取DOM中按钮后面的元素。
此外，您已经将循环设置为迭代5次，而您只有4个按钮，因此，通过使循环依赖于按钮的数量，根据您拥有的按钮的数量进行循环总是一种好的做法。
实际上你不需要身份证，所以我把它们拿掉了。 我根据上面的注意事项重新编写了您的代码
null
const btns = document.getElementsByClassName("dropbutton");
for (let i = 0; i < btns.length; ++i) {
btns[i].addEventListener("click", showAndHide);
}
function showAndHide() {
var click = this.nextElementSibling;
if (click.style.display === "none") {
click.style.display = "block";
} else {
click.style.display = "none";
}
};<div class="dropdown">
<button class="dropbutton">Home</button>
<div class="drop-content">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>
<button class="dropbutton">Arrivals</button>
<div class="drop-content">
<a href="#">Test111</a>
<a href="#">Test222</a>
<a href="#">Test3</a>
</div>
<button class="dropbutton">Clothing</button>
<div class="drop-content">
<a href="#">Test1123</a>
<a href="#">Test212</a>
<a href="#">Test3</a>
</div>
<button class="dropbutton">Schoes</button>
<div class="drop-content">
<a href="#">Test1</a>
<a href="#">Testaasdf2</a>
<a href="#">Test3</a>
</div>
</div>
null
document.querySelector(".dropdown").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("dropbutton")) {
tgt.nextElementSibling.classList.toggle("show")
}
}).drop-content {
display: none
}
.show {
display: block
}<div class="dropdown">
<button class="dropbutton">Home</button>
<div class="drop-content">
<a href="#">Test1</a>
<a href="#">Test2</a>
<a href="#">Test3</a>
</div>
<button class="dropbutton">Arrivals</button>
<div class="drop-content">
<a href="#">Test111</a>
<a href="#">Test222</a>
<a href="#">Test3</a>
</div>
<button class="dropbutton">Clothing</button>
<div class="drop-content">
<a href="#">Test1123</a>
<a href="#">Test212</a>
<a href="#">Test3</a>
</div>
<button class="dropbutton">Schoes</button>
<div class="drop-content">
<a href="#">Test1</a>
<a href="#">Testaasdf2</a>
<a href="#">Test3</a>
</div>
</div>