引导 - 如何保持下拉菜单打开时子菜单打开
问题描述:
我有困难想保持我的下拉菜单中打开时,我一个子菜单点击。你会认为Bootstrap会立刻做到这一点。但我无法找到任何文件。引导 - 如何保持下拉菜单打开时子菜单打开
这里是我发现的解决方案: https://www.bootply.com/rgvY6oPO1J
在我的HTML我有这样的:
<div class="btn-group" id="myDropdown">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Menu
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Choice1</a></li>
<li><a href="#">Choice2</a></li>
<li><a href="#" id="btn-mynumbers" data-toggle="collapse" data-target="#mynumbers" aria-expanded="false">Numbers</a>
<ul class="nav collapse" id="mynumbers" role="menu" aria-labelledby="btn-mynumbers">
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</li>
<li><a href="#">Choice3</a></li>
<li class="divider"></li>
<li><a href="#">Choice..</a></li>
</ul>
</div>
这里是什么在我的JavaScript:
$("#btn-mynumbers").on("click", function (e) {
e.stopPropagation();
$("#mynumbers").slideToggle("fast");
});
为大部分工作。但我将有很多的菜单项,我不想做一个上点击呼叫方为每个子菜单我创建。
所以,我试图把
在的onclick = “切换(本);”
ID = “BTN-通过myNumbers”
和创建功能
:
function Toggle(element) {
event.stopPropagation();
var parentid = element.id;
var childid = $(parentid).children("ul").attr("id");
$(childid).slideToggle("fast");
}
,所以我可以给每个子菜单中单击能力继续开放。但事件停止了所有传播,甚至是slideToggle。我不知道如何在子菜单滑下时保持下拉状态。
答
好像有跟你做,因为event
很可能是不确定的功能错误。我将它改为如下所示。但是你可以在下面的codepen链接中看到它。
$(".submenu").on("click", function (event) {
event.stopPropagation();
var target = event.currentTarget;
$(target).siblings('ul').slideToggle("fast");
});
如果您不想为每个可能的菜单项都设置一个子菜单,然后使用类,则最好的方法。这样你就不需要重新编码。
我给你做一个codepen展示了如何使用类而不是ID作为标识符。我又增加了菜单项的样品与子菜单为你玩弄。
希望有帮助!