引导程序中的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级下拉菜单只能通过点击操作

回答

相关问题