2014-10-10 149 views
1

我需要把下拉菜單...在下拉菜單在引導3.這是我試過的:Demo下拉菜單在...下拉菜單與引導

enter image description here

不幸的是,當我點擊第二個下拉,它不會顯示。

如何在點擊它時顯示第二個下拉菜單?那麼如何(用JS或jQuery)能夠處理第二個下拉列表的狀態變化?


HTML:

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div> 
      <ul class="nav navbar-nav"> 
       <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings<span class="caret"></span></a> 

        <ul class="dropdown-menu" role="menu"> 
         <li><a href="#">Edit</a> 
         </li> 
         <li><a href="#">Delete</a> 
         </li> 
         <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Visible by friends<span class="caret"></span></a> 

          <ul class="dropdown-menu" role="menu"> 
           <li><a href="#">Visible by friends</a> 
           </li> 
           <li><a href="#">Visible by me only</a> 
           </li> 
           <li><a href="#">Visible by anyone</a> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </div> 
</div> 
+0

*(我知道答案可能是:在下拉列表下拉urrr,不這樣做?但在這裏我想研究如何做到這一點)* – Basj 2014-10-10 21:52:34

+1

這可能會幫助你:http://stackoverflow.com/questions/18023493/bootstrap-3-dropdown-sub-menu-missing – xaisoft 2014-10-10 21:56:34

+0

謝謝@xaisoft,它是 離我的問題不遠,但它有點不同。這裏是一個子菜單:http://www.bootply.com/86684,當懸停2 /在右側時,會自動顯示1/... ...而不是我想要的:子菜單僅在點擊時顯示子菜單顯示在下面,就像下拉菜單一樣。 – Basj 2014-10-10 22:01:13

回答

1

也許複製你可以嘗試手動觸發內部模式的下拉。見fiddle

JS:

$('.dropdown li').click(function (e) { 
e.stopPropagation(); 
}); 
$('.dropdown-inner').click(function (e) { 
    e.stopPropagation(); 
    $(this).toggleClass('open').trigger('shown.bs.dropdown'); 
}); 

HTML:

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
<div class="container"> 
    <div> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings<span class="caret"></span></a> 

       <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">Edit</a> 
        </li> 
        <li><a href="#">Delete</a> 
        </li> 
        <li class="dropdown-inner"> <a href="#" class="dropdown-toggle-inner">Visible by friends<span class="caret"></span></a> 

         <ul class="dropdown-menu" role="menu"> 
          <li><a href="#">Visible by friends</a> 
          </li> 
          <li><a href="#">Visible by me only</a> 
          </li> 
          <li><a href="#">Visible by anyone</a> 
          </li> 
         </ul> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

+0

結果將會像「一個大菜單「:http://imgur.com/nRJqzJX:我們無法區分菜單和子菜單。任何想法解決這個問題? (請參閱其他答案的評論) – Basj 2014-10-10 22:19:04

+0

這可以使用css來解決,並根據您的特定目的進行定製。看到這個[小提琴](http://jsfiddle.net/mmtx0zph/4/)爲一個一般的例子。 – mark 2014-10-11 00:29:14

+0

謝謝@mark!這裏是我想要做的(我在內部下拉菜單中使用「按鈕」):http://jsfiddle.net/mmtx0zph/6/ 我應該添加哪些JS,以便可以打開內部按鈕? – Basj 2014-10-11 13:02:04

2

添加以下JavaScript:

$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { 
    // Avoid following the href location when clicking 
    event.preventDefault(); 
    // Avoid having the menu to close when clicking 
    event.stopPropagation(); 
    // If a menu is already open we close it 
    $('ul.dropdown-menu [data-toggle=dropdown]').parent().removeClass('open'); 
    // opening the one you clicked on 
    $(this).parent().addClass('open'); 
}); 

演示可以看到here

+0

謝謝!它可以工作,但結果會像「一個大菜單」一樣:http://imgur.com/nRJqzJX ......:我們無法區分菜單和子菜單。我想區分菜單和子菜單,我不明白怎麼做...我想要這樣的子菜單:http://imgur.com/7p0h2OM – Basj 2014-10-10 22:17:54