我正在使用-
$('.navbar-collapse a:not(.dropdown-toggle)').click(function(){
$(".navbar-collapse").collapse('hide');
});
和
$('.navbar-collapse .dropdown-menu').click(function(){
$(".navbar-collapse").collapse('hide');
});
要隐藏导航栏,它正在隐藏折叠的导航栏,但它只是隐藏导航栏的背景颜色/主体,并且文本本身仍在显示。什么可以解决此问题?
这是我的HTML:
var elements = `<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Main Menu</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
`
for(var i=0;i<jsonObject.length;i++){
var row=jsonObject[i];
console.log(row)
if(row.subcategory_list && !row.command){
elements += `
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">${row.category_name} <span class="caret"></span></a>
<ul class="dropdown-menu">`
for(var c=0;c<row.subcategory_list.length;c++){
var subrow = row.subcategory_list[c];
elements += `
<li><a href="#" >${subrow.subcategory_name}</a></li>
`
}
elements += `</ul><li>`
}
else{
elements += ` <li><a id=${row.command} href="#" onClick=GetMenu();>${row.category_name}</a></li>`
}
}
elements += `</ul></div>
</div>
</nav>
`
document.getElementById(divId).insertAdjacentHTML('beforeend',elements);
导航栏折叠时