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

我试图实现一个带有按钮的导航栏，它可以作为下拉列表。事件侦听器正在工作，但无论单击哪个按钮，它都只会打开第一个按钮的内容

这是我的密码：

for（设i=0；i<5；++i）{
const bnts=document.getElementsByClassName（“dropbutton”）；
bnts[i].添加了EventListener（“单击”，显示和隐藏）；
}
函数showAndHide（）{
var click=document.getElementsByClassName（“删除内容”）[0]；
如果（单击.style.display==“无”）{
单击.style.display=“块”；
}否则{
单击.style.display=“无”；
}
};

家
到达
服装
斯科斯
使用

试试这个

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

const bnts=document.getElementsByClassName（“dropbutton”）；
for（设i=0；i<5；++i）{
bnts[i].添加了EventListener（“单击”，显示和隐藏）；
}

您应该首先创建集合，然后才能在其中导航。
首先，您多次使用同一ID。这在HTML中是不允许的。ID必须是唯一的。您使用的是
GetElementsByCassName[0]
，它总是返回该类的第一个元素。由于拖放内容总是直接出现在按钮之后，因此可以选择单击的按钮，然后通过调用
nextElementSibling
在DOM中获取按钮之后的元素

此外，您已将循环设置为迭代5次，而您只有4个按钮，因此，通过使循环依赖于按钮的数量，根据按钮的数量进行循环始终是一种良好的做法

实际上你不需要这里的ID，所以我把它们删除了。我根据上面的注释重新编写了代码


const btns=document.getElementsByClassName（“dropbutton”）；
对于（设i=0；i

家
到达
服装
斯科斯

委托-那么您不需要按钮上的ID，该ID无论如何都必须是唯一的
使用三元组或切换类列表

document.querySelector（“.dropdown”）.addEventListener（“单击”，函数（e）{
常数tgt=e.target；
if（tgt.classList.contains（“dropbutton”））{
tgt.nextElementSibling.classList.toggle（“显示”）
}
})
。删除内容{
显示：无
}
.表演{
显示：块
}

家
到达
服装
斯科斯
document.getElementsByClassName（“删除内容”）[0]选择第一个按钮元素这是OP的默认值。
const bnts = document.getElementsByClassName("dropbutton");
for (let i = 0; i < 5; ++i) {
    bnts[i].addEventListener("click", showAndHide);
}