Twitter bootstrap 引导中的两级下拉菜单仅使用单击
我试图在不悬停的情况下强制嵌套下拉菜单。目前,下面的代码仅显示 嵌套下拉菜单仅在使用鼠标悬停时激活。我想强制它只与点击,以便在移动版的网站,它会导致任何问题。我试图达到的效果如下所示: 方法: 我试图将下拉开关置于下拉开关内,但嵌套的下拉开关将不会显示Twitter bootstrap 引导中的两级下拉菜单仅使用单击,twitter-bootstrap,drop-down-menu,Twitter Bootstrap,Drop Down Menu,我试图在不悬停的情况下强制嵌套下拉菜单。目前,下面的代码仅显示 嵌套下拉菜单仅在使用鼠标悬停时激活。我想强制它只与点击,以便在移动版的网站,它会导致任何问题。我试图达到的效果如下所示: 方法: 我试图将下拉开关置于下拉开关内,但嵌套的下拉开关将不会显示 <div class="nav-collapse collapse"> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdow
<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>
我也做了类似的事情。
我为你创作了一把小提琴:
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;
});
});
});
我不得不在引导程序上使用下面的CSS,这样第二级菜单就可以向侧面打开
.dropdown-menu .dropdown-menu {
top: 0;
left: 100%;
margin: 0;
padding: 0;
}
我希望这有帮助