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（元素）{
对于（var 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；}

下拉列表
下拉列表

我想你在找这样的东西

//每次单击都会调用此函数以隐藏以前的内容
//打开下拉列表（如果有）
常量hideAll=（）=>{
const dropDowns=document.querySelectorAll（“.dropdown content”）；
Array.prototype.forEach.call（下拉列表，（项）=>{
if（item.classList.contains（'show'））{
item.classList.remove（'show'）；
} 
});
};
//showDropDown“myFunction”接受参数“id”以选择唯一元素，
//在该方法中，将调用hideAll函数来关闭任何其他函数
//打开下拉列表并打开所需的下拉列表
const showDropDown=id=>{
希德尔（）；
document.getElementById（id）.classList.toggle（“显示”）；
};
//重置功能是在按钮外部触发单击时关闭所有下拉列表
常数重置=（e）=>{
如果（！e.target.matches（'.dropbtn'））{
希德尔（）；
}
};
//将单击事件侦听器添加到窗口以重置打开的下拉列表
window.addEventListener（“单击”，重置）；
//选择按钮并分配给可变基站
const btns=document.querySelectorAll（'.dropbtn'）；
//调用数组的forEach方法，传递给它的BTN
//在循环内部，向每个按钮添加单击事件侦听器
//单击后，将使用动态生成的id调用showDropDown
Array.prototype.forEach.call（btn，（btn，索引）=>{
btn.addEventListener（'click'，（）=>showDropDown（'drop_${index+1}'））
});
.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；}

下拉列表
下拉列表
首先，让多个元素具有相同的
id是一种不好的做法。Id应该是唯一的<代码>document.getElementById（“myDropdown”）.classList.to