为单个用户创建Javascript下拉列表

我有以下代码，但只适用于第一行。即使您单击第三个按钮，它也会引用顶部按钮的信息和位置。我如何告诉Javascript下拉列表应该基于单个用户？（在本例中，有3个用户由其ID标识：2160、3550和5520）

函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#3e8e41；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉菜单a:悬停{
背景色：#f1f1
}
.表演{
显示：块；
}

点击按钮打开下拉菜单


下拉列表


下拉列表


下拉列表

不能有多个元素具有相同的

id

。如果执行此操作，则

getElementById（）

将只返回文档中找到的第一个。因此，您的

单击
处理程序：

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

始终引用第一个按钮

但是，事实证明，您甚至不需要使用
id
来解决这个问题

真的，你做得太过分了

包装
div
元素的
元素是不必要的。它们在语义上是不正确的。如果您需要它们提供的额外垂直空间，只需向每个
div
元素添加
marginbottom

现在，您正在内联HTML以及
窗口中设置
单击事件处理。两者都不应使用。您应该在每个按钮上设置click事件处理程序，然后当每个按钮都被单击时，它可以切换它后面的下一个元素的可见性。那会解决你的问题

最后，您还应该在这里使用
ul
和
li
元素，因为您正在创建列表，所以为了语义正确，在创建列表时使用列表元素

非常简单且有效的代码如下：


函数myFunction（）{
this.nextElementSibling.classList.toggle（“show”）；
}
//将所有按钮作为一个数组获取
var btns=Array.prototype.slice.call（document.queryselectoral（“.dropbtn”）；
//循环遍历数组并分配click事件处理程序
btns.forEach（功能（btn）{
btn.addEventListener（“单击”，myFunction）；
});
ul{
列表样式：无；
保证金：0；
填充：0；
}
李{
显示：内联块；
}
.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#3e8e41；
}
.下拉列表{
边缘底部：1米；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉菜单a:悬停{
背景色：#f1f1
}
.表演{
显示：块；
}
点击按钮打开下拉菜单

下拉列表





下拉列表





下拉列表





如注释中所述，div需要有唯一的ID。像myDropDown1、myDropDown2和myDropDown3这样简单的东西可以工作。您还需要修改myFunciton，如下所示：

function myFunction(id) {
   document.getElementById(id).classList.toggle("show");
}

然后，您的html可能会如下所示：

    <p>Click on the button to open the dropdown menu.</p>

    <p>
    <div class="dropdown">
       <button onclick="myFunction('myDropdown1')" class="dropbtn">Dropdown</button>
       <div id="myDropdown1" class="dropdown-content">
         <a href="1-2160.html">1</a>
         <a href="2-2160.html">2</a>
         <a href="3-2160.html">3</a>
       </div>
     </div>
    </p>

    <p>
    <div class="dropdown">
    <button onclick="myFunction('myDropdown2')" class="dropbtn">Dropdown</button>
  <div id="myDropdown2" class="dropdown-content">
    <a href="1-3550.html">1</a>
    <a href="2-3550.html">2</a>
    <a href="3-3550.html">3</a>
  </div>
</div>
</p>

<p>
<div class="dropdown">
<button onclick="myFunction('myDropdown3')" class="dropbtn">Dropdown</button>
  <div id="myDropdown3" class="dropdown-content">
    <a href="1-5520.html">1</a>
    <a href="2-5520.html">2</a>
    <a href="3-5520.html">3</a>
  </div>
</div>
</p>

点击按钮打开下拉菜单


下拉列表


下拉列表


下拉列表

id在文档中必须是唯一的。我马上看到的是，您对所有三个div都有
id=“myDropdown”
。您的div id应该是唯一的。