我正在尝试使用 Bootstrap 3 制作侧面导航栏。现在子菜单显示在每个菜单的右侧。我想将它显示在父菜单的底部。
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu" style="display: block; position: static; margin-bottom: 5px; *width: 180px;">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a href="#">More..</a>
<ul class="dropdown-menu">
<li><a href="#">3rd level</a></li>
<li><a href="#">3rd level</a></li>
</ul>
</li>
</ul>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">More options2</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
<a href="#">More..</a>
<ul class="dropdown-menu">
<li><a href="#">3rd level</a></li>
<li><a href="#">3rd level</a></li>
</ul>
</li>
<li><a href="#">Second level</a></li>
<li><a href="#">Second level</a></li>
</ul>
</li>
</ul>
这是 Demo.
编辑: 我尝试使用 collapse jsfiddle.net/mridulpv/Wrh8x/5 来做到这一点.但还是有些问题。我想在开始时隐藏折叠元素,并删除水平线等。
最佳答案
您可以通过不从文档流中删除子菜单来实现此效果。这意味着当菜单项悬停时,所有内容都会被按下。这确实会导致第三层出现问题,因为当您将鼠标移出第三层时,所有内容都会崩溃并且您会失去焦点,但我认为通过单击而不是悬停让此菜单正常运行并不困难。 (只需单击即可添加/删除类。请参阅编辑。)
但这就是你想要做的:
.dropdown-submenu > .dropdown-menu{
position: relative;
left: 0;
top: 0;
margin: 0;
}
当您将鼠标悬停在菜单上时,您会看到菜单被按下。这是因为我的定位是相对的,而不是绝对的。
编辑:
通过更多的摆弄,我设法使用非常少的 jquery 和更多的 css 进行点击:
JS:
$('.dropdown-submenu > a').click(function(){
$(this).parent().children('.dropdown-menu').toggleClass('shown');
});
CSS:
.dropdown-submenu > .dropdown-menu{
position: relative;
left: 0;
top: 0;
margin: 0;
}
.dropdown-submenu:hover > .dropdown-menu{
display: none;
}
.shown{
display: block;
}
.dropdown-submenu:hover > .shown{
display: block;
}
关于html - Bootstrap 3 :How to display sub-menu of side navigation bar, 每个菜单的底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20652019/