Javascript 第三次单击菜单项赢得'；不要下来

我开始写一个有响应的导航栏（4个菜单项），有两个下键。现在，我想补充第三点。但当我添加第三个时，它不会下降。早些时候，有人帮我做了第二个（它也没有掉下来），而且效果很好。所以我想我应该从第二个复制JS，但那不起作用。有人能告诉我，为了让第三个也能掉下来，我需要做些什么吗？谢谢

函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
/*如果你绑定了2个onclick，那么只有最后一个会开火*/
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
removeShow（“下拉内容”）；
}
如果（！event.target.matches（'.dropbtn2'））{
removeShow（“下拉内容2”）；
}
}
函数removeShow（类名）{
var dropdowns=document.getElementsByClassName（className）；
var i；
对于（i=0；i

/*导航*/
.导航栏-0{
高度：自动；
}
.导航栏-1{
文本对齐：居中；
颜色：#fb4d；
填充：0px；
}
.家，
.联系方式{
填充物：5px；
}
/*下拉按钮*/
.dropbtn{
文本对齐：居中；
字体大小：15px；
字体系列：“开放式Sans”，无衬线；
背景色：白色；
颜色：#fb4d；
填充：0px；
边际：0px；
边界：无；
光标：指针；
字体大小：粗体；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
保证金：5px；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：白色；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：#fb4d；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*显示下拉菜单（当用户单击下拉按钮时，使用JS将此类添加到.dropdown内容容器）*/
.表演{
显示：块；
边界：无；
}
/*2e下降*/
/*下拉按钮*/
.dropbtn2{
字体大小：15px；
字体系列：“开放式Sans”，无衬线；
背景色：白色；
颜色：#fb4d；
填充：0px；
边际：0px；
边界：无；
光标：指针；
字体大小：粗体；
}
/*容器-需要定位下拉内容*/
.下拉列表2{
位置：相对位置；
保证金：5px；
}
/*下拉内容（默认情况下隐藏）*/
.下拉列表2{
显示：无；
位置：绝对位置；
背景色：白色；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉列表内容2 a{
颜色：#fb4d；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉列表内容2 a:悬停{
背景色：#f1f1
}
/*显示下拉菜单（当用户单击下拉按钮时，使用JS将此类添加到.dropdown内容容器）*/
.表演{
显示：块；
边界：无；
}
/*3e下降*/
/*下拉按钮*/
.dropbtn3{
字体大小：15px；
字体系列：“开放式Sans”，无衬线；
背景色：白色；
颜色：#fb4d；
填充：0px；
边际：0px；
边界：无；
光标：指针；
字体大小：粗体；
}
/*容器-需要定位下拉内容*/
.下拉列表3{
位置：相对位置；
保证金：5px；
}
/*下拉内容（默认情况下隐藏）*/
.下拉列表3{
显示：无；
位置：绝对位置；
背景色：白色；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉列表-3 a{
颜色：#fb4d；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉列表内容3 a:悬停{
背景色：#f1f1
}
/*显示下拉菜单（当用户单击下拉按钮时，使用JS将此类添加到.dropdown内容容器）*/
.表演{
显示：块；
边界：无；
}
按钮：焦点{
大纲：0；
}

安博德酒店
文件夹
斯佩尔斯

您正在调用myFunction3，但尚未定义，您必须在中创建myFunction3 js

---

感谢您的帮助。

您的onClick按钮应该是

<button onclick="myFunction('myDropdown')"  class="dropbtn">ONS AANBOD</button>
<button onclick="myFunction('myDropdown2')" class="dropbtn">PORTFOLIO</button>
<button onclick="myFunction('myDropdown3')" class="dropbtn">SPELERS</button>

---

您正在调用myFunction3，但它没有定义。谢谢，这非常有效！我没有在这段代码中包含myFunction3的原因是我尝试了类似于您的代码的东西，但没有成功。

<button onclick="myFunction('myDropdown')"  class="dropbtn">ONS AANBOD</button>
<button onclick="myFunction('myDropdown2')" class="dropbtn">PORTFOLIO</button>
<button onclick="myFunction('myDropdown3')" class="dropbtn">SPELERS</button>

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