Question

当我点击子菜单时，我无法打开下拉菜单。您会认为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 = “切换（本）;”

in

ID = “BTN-通过myNumbers”

并创建函数：

function Toggle(element) {
    event.stopPropagation();
    var parentid = element.id;
    var childid = $(parentid).children("ul").attr("id");
    $(childid).slideToggle("fast");

}

所以我可以给每个子菜单点击保持打开的能力。但是事件停止了所有传播，甚至是slideToggle。当子菜单向下滑动时，我不知道如何保持打开状态。

Answer 1

似乎您所做的功能出错，因为event可能未定义。我把它改成了下面的东西。但是你可以通过下面的codepen链接看到它。

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

如果您不想为每个可能包含子菜单的菜单项添加ID，那么最好的方法是使用类。这样你就不需要重新编码了。

我为你制作了一个codepen，它展示了如何使用类而不是id作为标识符。我添加了另一个菜单项的示例，其中包含一个子菜单供您玩。

希望有所帮助！

Bootstrap - 如何在子菜单打开时保持打开下拉菜单

1 个答案: