friend 们!
是否有机会使用 Bootsrap 3 在下拉菜单项内创建嵌套下拉菜单(多级下拉菜单)?这是http://jsfiddle.net/kkqxgfk6/1/我正在尝试做什么。可能是我在代码中的某个地方犯了错误,是这样吗? 这是 html 代码:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown2 <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li ><a href="#" >Something</a>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</li>
<li><a href="#">Another action</a>
</li>
<li><a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li><a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
嵌套的“Dropdown2”菜单项无法像其名为“Dropdown”的父菜单项一样打开
最佳答案
将所有粗体内容添加到您的代码中。
<ul class="dropdown-menu" role="menu" **onclick="event.stopPropagation();"**>
<li class="dropdown" **id="test"**>
<a href="#" class="dropdown-toggle" **id="test1"** data-toggle="dropdown" role="button">Dropdown2 <span class="caret"></span></a>
将此代码添加到 JavaScript 中。
$( "#test1" ).click(function() {
$(this).attr("aria-expanded", "true");
$('#test').addClass("open");
});
问题的原因默认情况下,当您单击下拉列表内部时,它会关闭。 在这里,我们将类动态添加到第二个下拉列表中。
关于drop-down-menu - 如何使用 Bootstrap 3 在导航栏菜单的下拉项中创建嵌套下拉菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30666489/