引导 - 如何保持下拉菜单打开时子菜单打开

我有困难想保持我的下拉菜单中打开时，我一个子菜单点击。你会认为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。我不知道如何在子菜单滑下时保持下拉状态。

来源

2017-09-13 NeoSketo

好像有跟你做，因为event很可能是不确定的功能错误。我将它改为如下所示。但是你可以在下面的codepen链接中看到它。

$(".submenu").on("click", function (event) { 
    event.stopPropagation(); 
    var target = event.currentTarget; 
    $(target).siblings('ul').slideToggle("fast"); 
});

如果您不想为每个可能的菜单项都设置一个子菜单，然后使用类，则最好的方法。这样你就不需要重新编码。

我给你做一个codepen展示了如何使用类而不是ID作为标识符。我又增加了菜单项的样品与子菜单为你玩弄。

希望有帮助！

来源

2017-09-13 16:09:16 henrisycip

引导 - 如何保持下拉菜单打开时子菜单打开

回答

相关问题