Javascript 切换引导导航下拉菜单

我已经创建了一个引导菜单，如代码片段中所示，当页面内容展开时，它会在其余内容上显示一个lightbox效果

我在JS中添加了第一个函数，尝试在切换导航时隐藏/显示

lightbox\u容器

元素

第二个功能是，当他们在

lightbox\u container

元素上单击关闭导航时，再次尝试切换导航，但这无法正常工作，因为它会将

style=“display:none”

添加到下拉列表中，因此当您再次尝试展开它时，它不会显示

$（“#navbarSupportedContent”）.on（'show.bs.collapse hide.bs.collapse'，函数（e）{
var lightbox=document.getElementById（“lightbox\u容器”）；
如果（e.type=='hide'）{
lightbox.style.display=“无”；
}否则如果（e.type=='show'）{
lightbox.style.display=“block”；
}
});
$（“#lightbox_container”）。在（“单击”，函数（）{
if（$（“#navbarSupportedContent”）.hasClass（“显示”））{
$（“#navbarSupportedContent”）.hide（）；
}
var lightbox=document.getElementById（“lightbox\u容器”）；
lightbox.style.display=“无”；
});
灯箱容器{
位置：固定；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.5）；
z指数：40；
显示：无；
顶部：0px；
左：0px；
}
导航{
z指数：50；
背景色：红色；
}
.图标{
边框：1px纯黑；
填充物：5px；
}




































而不是
$（“#navbarSupportedContent”）.hide（）
只需删除
show
类，如：

$（“#navbarSupportedContent”）.removeClass（“show”）

请参见代码片段：


$（“#navbarSupportedContent”）.on（'show.bs.collapse hide.bs.collapse'，函数（e）{
var lightbox=document.getElementById（“lightbox\u容器”）；
如果（e.type=='hide'）{
lightbox.style.display=“无”；
}否则如果（e.type=='show'）{
lightbox.style.display=“block”；
}
});
$（“#lightbox_container”）。在（“单击”，函数（）{
if（$（“#navbarSupportedContent”）.hasClass（“显示”））{
$（“#navbarSupportedContent”）.removeClass（“show”）；
}
var lightbox=document.getElementById（“lightbox\u容器”）；
lightbox.style.display=“无”；
});
灯箱容器{
位置：固定；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.5）；
z指数：40；
显示：无；
顶部：0px；
左：0px；
}
导航{
z指数：50；
背景色：红色；
}
.图标{
边框：1px纯黑；
填充物：5px；
}
车身{高度：2000px；}




































只是一个旁注-如果您使用jquery，就不需要使用
document.getElementById
，而是使用
$（…）