Javascript 在单独的下拉菜单上执行相同操作的多个功能

除了此处提出的问题，该问题由以下人员解决：

下面是一个示例：

//下拉列表\u 1
功能下拉菜单（btn）{
document.getElementById（“菜单列表”）.classList.toggle（“数据内容”）；
btn.classList.toggle（“选择的按钮”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.button'））{
var menu=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

.button、.button2{
背景颜色：蓝色；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.按钮：悬停，.按钮2：悬停{
背景颜色：绿色；
}
.按钮被选中，
.所选按钮：悬停{
背景色：红色；
}
.按钮选择2，
.按钮选择2：悬停{
背景颜色：橙色；
}
.下拉列表，.下拉列表2{
位置：相对位置；
显示：内联；
}
.dropdown内容，.dropdown-content2{
显示：无；
位置：绝对位置；
背景色：#EFEF；
最小宽度：160px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
左：30px；
}
.dropdown内容a、.dropdown-content2内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉菜单a:悬停，.下拉菜单2 a:悬停{
背景颜色：灰色
}
.D内容{
显示：块；
}

下拉列表1
下拉列表2

我实际上找到了一个解决方案，问题是第二个下拉按钮条件必须放在window.onclick=function（event）内，而不是单独设置

//下拉列表
功能下拉菜单（btn）{
document.getElementById（“菜单列表”）.classList.toggle（“数据内容”）；
btn.classList.toggle（“选择的按钮”）；
}
功能下拉菜单（btn）{
document.getElementById（“menu_list2”）.classList.toggle（“dcontent”）；
btn.classList.toggle（“按钮选择2”）；
}
//状况
window.onclick=函数（事件）{
如果（！event.target.matches（'.button'））{
var menu=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

.button、.button2{
背景颜色：蓝色；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
光标：指针；
}
.按钮：悬停，.按钮2：悬停{
背景颜色：绿色；
}
.按钮被选中，
.所选按钮：悬停{
背景色：红色；
}
.按钮选择2，
.按钮选择2：悬停{
背景颜色：橙色；
}
.下拉列表，.下拉列表2{
位置：相对位置；
显示：内联；
}
.dropdown内容，.dropdown-content2{
显示：无；
位置：绝对位置；
背景色：#EFEF；
最小宽度：160px；
溢出：自动；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
左：30px；
}
.dropdown内容a、.dropdown-content2内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉菜单a:悬停，.下拉菜单2 a:悬停{
背景颜色：灰色
}
.D内容{
显示：块；
}

下拉列表1
下拉列表2