多个下拉按钮列表JavaScript

我只是想知道你们中是否有人有一个解决方案可以帮助我在一个页面上添加多个下拉按钮。我认为JavaScript部分有问题。我希望能够嵌入至少两个或更多的下拉按钮在同一页上

当我使用当前代码执行此操作时，当您单击第二个按钮时，第一个元素的下拉菜单将向下

代码片段

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

.dropbtn{
背景色：#3498DB；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#2980B9；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#ddd}
.show{display:block；}

下拉列表
下拉列表

为每个下拉列表创建两个单独的函数

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

.dropbtn{
背景色：#3498DB；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.dropbtn:悬停，.dropbtn:焦点{
背景色：#2980B9；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#ddd}
.show{display:block；}

下拉列表
下拉列表

更改函数名并复制JS是我的答案吗，兄弟？是的，这很有帮助，尼哈尔，我只是不知道是否有办法让我有几个按钮作为下拉列表。如果你有一个有效的方法，用很少的JavaScript创建这样的下拉列表，我很乐意看到它。再次感谢。你能给我的答案打绿色勾（接受答案），这样每个人都知道这是有效的吗