JavaScript下拉菜单函数的问题

我唯一的问题是，当你从一个下拉菜单标题转到下一个下拉菜单标题时，第一个下拉标题保持打开状态，我已经附加了代码笔，希望这是允许的

编辑：下面的解决方案很好，但它们都失去了菜单的切换功能，这意味着菜单不能通过单击同一菜单项进行下拉和备份。这对于菜单的功能非常重要，因为在一些小型手机中，下拉菜单可能占据大部分屏幕，因此它们无法关闭打开的下拉菜单

功能区块链（）{
var元素=document.getElementById（“dropone”）；
element.classList.toggle（“mystyle”）；
}
功能产品（）{
var元素=document.getElementById（“droptwo”）；
element.classList.toggle（“mystyle”）；
}
职能付款（）{
var元素=document.getElementById（“dropthree”）；
element.classList.toggle（“mystyle”）；
}
职能服务（）{
var元素=document.getElementById（“dropfore”）；
element.classList.toggle（“mystyle”）；
}
window.onclick=函数（事件）{
如果（！event.target.matches（'.subnavbtn'））{
var dropdowns=document.getElementsByClassName（“subnav内容”）；
var i；
对于（i=0；i

正文{
最大宽度：1400px；
保证金：0自动；
填充物：5px；
}
navbar先生{
位置：相对位置；
最大宽度：700px；
宽度：100%；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
文本对齐：居中；
填充：5px0px；
文字装饰：无；
颜色：黑色；
}
.navbar a:第n个子项（4n+1）{
左边框：px固体#4caf50；
}
.subnav{
框大小：边框框；
左边框：1px纯白；
浮动：左；
宽度：25%；
文本对齐：居中；
背景色：#4caf50；
}
.subnav：最后一个孩子{
边界权：；
}
.subnav：第一个孩子{
左边框：1px实心#4caf50；
}
.subnav.subnavbtn{
字体大小：16px；
宽度：100%；
背景色：#4caf50；
边界：无；
大纲：无；
颜色：白色；
填充：10px 1px；
保证金：0；
z指数：1；
}
.subnav内容{
位置：绝对位置；
显示：无；
边框：1px实心#4caf50；
边界顶部：无；
最大宽度：700px；
宽度：100%；
左：0；
文字装饰：无；
背景色：#F4；
框大小：边框框；
}
.subnav内容a{
浮动：左；
宽度：25%；
框大小：边框框；
左边框：1px纯白；
字体大小：12px；
}
.subnav内容a：悬停{
颜色：白色；
}
.subnav内容：第n个子项（4n-3）{
左边界：无；
}
.导航栏a:悬停，
.subnav:悬停.subnavbtn{
字体大小：粗体；
背景色：#2c602e；
}
mystyle先生{
显示：块；
}
.subnav：悬停.subnav内容{
框大小：边框框；
}
@仅介质屏幕和（最大宽度：500px）{
.subnav内容a{
宽度：50%；
}
.subnav.subnavbtn{
字体大小：14px；
}
.subnav内容a:n个子（2n-1）{
左边界：无；
}
}

块链
产品
付款
服务

创建关闭所有导航项的功能

单击导航项或文档时调用此函数

功能区块链（）{
var元素=document.getElementById（“dropone”）；
if（element.classList.contains（“mystyle”））{
element.classList.remove（“mystyle”）；
}否则{
closeAll（）；
element.classList.add（“mystyle”）；
}
}
功能产品（）{
var元素=document.getElementById（“droptwo”）；
if（element.classList.contains（“mystyle”））{
element.classList.remove（“mystyle”）；
}否则{
closeAll（）；
element.classList.add（“mystyle”）；
}
}
职能付款（）{
var元素=document.getElementById（“dropthree”）；
if（element.classList.contains（“mystyle”））{
element.classList.remove（“mystyle”）；
}否则{
closeAll（）；
element.classList.add（“mystyle”）；
}
}
职能服务（）{
var元素=document.getElementById（“dropfore”）；
if（element.classList.contains（“mystyle”））{
element.classList.remove（“mystyle”）；
}否则{
closeAll（）；
element.classList.add（“mystyle”）；
}
}
window.onclick=函数（事件）{
关闭所有（事件）；
}
函数closeAll（事件=null）{
如果（！event | |！event.target.matches（'.subnavbtn'））{
var dropdowns=document.getElementsByClassName（“subnav内容”）；
var i；
对于（i=0；i

正文{
最大宽度：1400px；
保证金：0自动；
填充物：5px；
}
navbar先生{
位置：相对位置；
最大宽度：700px；
宽度：100%；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
文本对齐：居中；
填充：5px0px；
文字装饰：无；
颜色：黑色；
}
.navbar a:第n个子项（4n+1）{
左边框：px固体#4caf50；
}
.subnav{
框大小：边框框；
左边框：1px纯白；
浮动：左；
宽度：25%；
文本对齐：居中；
背景色：#4caf50；
}
.subnav：最后一个孩子{
边界权：；
}
.subnav：第一个孩子{
左边框：1px实心#4caf50；
}
.subnav.subnavbtn{
字体大小：16px；
宽度：100%；
背景色：#4caf50；
边界：无；
大纲：无；
颜色：白色；
填充：10px 1px；
保证金：0；
z指数：1；
}
.subnav内容{
位置：绝对位置；
显示：无；
边框：1px实心#4caf50；
边界顶部：无；
最大宽度：700px；
宽度：100%；
左：0；
文字装饰：无；
背景色：#F4；
框大小：边框框；
}
.subnav内容a{
浮动：左；
宽度：25%；
框大小：边框框；