Javascript 选择其他选项时关闭下拉列表

如果选择了另一个下拉列表，如何修改将隐藏打开下拉列表的JavaScript代码？原始代码来自W3.CSS文档，但我不确定如何修改它。我尝试用

w3hide

替换

w3show

，尝试在JavaScript中删除和添加类，但似乎没有任何效果

//用于在单击菜单按钮时在小屏幕上切换菜单
函数myFunction（）{
var x=document.getElementById（“mySidebar”）；
if（x.className.indexOf（“w3显示”）=-1）{
x、 className+=“w3显示”；
$（'body'）.addClass（“fixedPosition”）；/*在移动导航栏打开时防止页面滚动*/
}否则{
x、 className=x.className.replace（“w3 show”，“w3 show”）；
$（'body'）.removeClass（“fixedPosition”）；
}
}
//移动导航上的下拉列表
函数myDropFunc（dropParam）{
var x=document.getElementById（dropParam）；
if（x.className.indexOf（“w3显示”）=-1）{
x、 className+=“w3显示”；
x、 previousElementSibling.className+=“w3浅灰色”；
}否则{
x、 className=x.className.replace（“w3 show”，“w3 show”）；
x、 previousElementSibling.className=
x、 previousElementSibling.className.replace（“w3浅灰色，”）；
}
}

IT服务
网络服务

在显示单击的下拉列表之前，您可以隐藏所有的

w3下拉列表内容

为此，您可以修改
myDropFunc（…）
以在显示单击的内容之前关闭所有内容

下面是在该函数中执行此操作的相关代码。它通过classname
w3下拉列表content
获取所有内容，并遍历每个节点以删除
w3 show
类（无论是否有）

var allDropDownContent=document.getElementsByClassName（“w3下拉内容”）；
对于（var i=0；i

这是一个完整的工作示例


//用于在单击菜单按钮时在小屏幕上切换菜单
函数myFunction（）{
var x=document.getElementById（“mySidebar”）；
if（x.className.indexOf（“w3显示”）=-1）{
x、 className+=“w3显示”；
$（'body'）.addClass（“fixedPosition”）；/*在移动导航栏打开时防止页面滚动*/
}否则{
x、 className=x.className.replace（“w3 show”，“w3 show”）；
$（'body'）.removeClass（“fixedPosition”）；
}
}
//移动导航上的下拉列表
函数myDropFunc（dropParam）{
//在显示单击的内容之前，请关闭所有下拉内容。
var x=document.getElementById（dropParam）；
if（x.className.indexOf（“w3显示”）=-1）{
var allDropDownContent=document.getElementsByClassName（“w3下拉内容”）；
对于（var i=0；i


IT服务
网络服务
在显示单击的下拉列表之前，您可以隐藏所有的
w3下拉列表内容

为此，您可以修改
myDropFunc（…）
以在显示单击的内容之前关闭所有内容

下面是在该函数中执行此操作的相关代码。它通过classname
w3下拉列表content
获取所有内容，并遍历每个节点以删除
w3 show
类（无论是否有）

var allDropDownContent=document.getElementsByClassName（“w3下拉内容”）；
对于（var i=0；i

这是一个完整的工作示例


//用于在单击菜单按钮时在小屏幕上切换菜单
函数myFunction（）{
var x=document.getElementById（“mySidebar”）；
if（x.className.indexOf（“w3显示”）=-1）{
x、 className+=“w3显示”；
$（'body'）.addClass（“fixedPosition”）；/*在移动导航栏打开时防止页面滚动*/
}否则{
x、 className=x.className.replace（“w3 show”，“w3 show”）；
$（'body'）.removeClass（“fixedPosition”）；
}
}
//移动导航上的下拉列表
函数myDropFunc（dropParam）{
//在显示单击的内容之前，请关闭所有下拉内容。
var x=document.getElementById（dropParam）；
if（x.className.indexOf（“w3显示”）=-1）{
var allDropDownContent=document.getElementsByClassName（“w3下拉内容”）；
对于（var i=0；i


IT服务
网络服务
您正在使用jQuery吗？询问，因为您的函数中既有jQuery选择器（
$（'body'）
）也有vanilla javascript选择器（
document.getElementById
）。主要是vanilla JS，但也可以使用jQuery。您在使用jQuery吗？询问，因为您有jQuery选择器（
$（'body'）
）和vanilla javascript选择器（
document.getElementById
）
var allDropDownContent = document.getElementsByClassName("w3-dropdown-content");
for (var i = 0; i < allDropDownContent.length; i++) {
  allDropDownContent[i].className = allDropDownContent[i].className.replace(" w3-show", "");
}