如何使用bootstrap 3在navbar菜单的drodown项目中创建嵌套下拉菜单？

Question

朋友们！

是否有机会使用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”菜单项水湿打开像所谓的“下拉”

Answer 1

添加的所有内容大胆到代码主菜单项目。

<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"); 
    }); 

原因您的问题默认情况下，当您单击下拉菜单里面它关闭。 这里我们将动态添加类到第二个下拉列表。

Answer 2

创建一个CSS文件并定义“Dropdown-submenu”类。 应用此“下拉菜单，子菜单”一流自己内心的“LI”标签为：

<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 dropdown-submenu"> 
         <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> 

CSS文件将定义下拉，子菜单为：

.dropdown-submenu { 
position:relative; } .dropdown-submenu>.dropdown-menu { 
top:0; 
left:100%; 
margin-top:-6px; 
margin-left:-1px; 
-webkit-border-radius:0 6px 6px 6px; 
-moz-border-radius:0 6px 6px 6px; 
border-radius:0 6px 6px 6px; } .dropdown-submenu:hover>.dropdown-menu { 
display:block; } .dropdown-submenu>a:after { 
display:block; 
content:" "; 
float:right; 
width:0; 
height:0; 
border-color:transparent; 
border-style:solid; 
border-width:5px 0 5px 5px; 
border-left-color:#333333; 
margin-top:5px; 
margin-right:-10px; } .dropdown-submenu:hover>a:after { 
border-left-color: #999999; } .dropdown-submenu.pull-left { 
float:none; } .dropdown-submenu.pull-left>.dropdown-menu { 
left:-100%; 
margin-left:10px; 
-webkit-border-radius:6px 0 6px 6px; 
-moz-border-radius:6px 0 6px 6px; 
border-radius:6px 0 6px 6px; }