如何使用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; }