引導程序中的2級下拉菜單隻能通過點擊操作

我試圖強制嵌套下拉菜單沒有懸停。目前，下面的代碼僅顯示嵌套的下拉菜單，僅在懸停激活。我只是想點擊它來強制它，所以在移動版本的網站上會導致任何問題。我想要達到的效果是這樣的：http://www.meanthemes.com/demo/meanmenu/demo.html 引導程序中的2級下拉菜單隻能通過點擊操作

途徑：

我試圖把裏面dropdown-toggledrop-down-toggle，但嵌套的下拉列表將不會被顯示出來。

<div class="nav-collapse collapse"> 
<ul class="nav"> 
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Buildings/Land <b class="caret"></b></a> 
<ul class="dropdown-menu"> 

    <li class="dropdown-submenu"><a tabindex="-2" href="#"><img src="icons/huron-river-prot_icon.png" class="icons-images">Huron River Protection</a> 
    <ul class="dropdown-menu"> 
     <li><a href="#"><img src="icons/green-roof_icon.png" class="icons-images">Green Roof</a></li> 
     <li><a href="#"><img src="icons/huron-river-prot_icon.png" class="icons-images">Porous pavement</a></li> 
     <li><a href="#"><img src="icons/retention-detention_icon.png" class="icons-images">Retention/detention</a></li> 
    </ul> 
    </li> 

    </ul> 
     </li>   
</ul> 
</div>

來源

2013-04-22 max

我做了類似的事情。我爲你創建一個小提琴:)

HTML非常像你的。我使用jquery來識別二級菜單並在點擊時打開它們。

 $(document).ready(function(){ 
    $('.dropdown .dropdown').each(function(){ 
     var $self = $(this); 
     var handle = $self.children('[data-toggle="dropdown"]'); 
     $(handle).click(function(){ 
      var submenu = $self.children('.dropdown-menu'); 
      $(submenu).toggle(); 
      return false; 
     }); 
    }); 
});

我必須在bootstrap之上使用下面的CSS，這樣第二級菜單纔會打開。

.dropdown-menu .dropdown-menu { 
top: 0; 
left: 100%; 
margin: 0; 
padding: 0; 
}

http://jsfiddle.net/elewinso/Upmx8/

我希望這有助於。

來源

2013-09-11 09:36:24 elewinso

引導程序中的2級下拉菜單隻能通過點擊操作

回答

相關問題