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

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="Toggle(this);"

在

id="btn-mynumbers"

并创建以下函数：

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

}

所以我希望每个子菜单点击都具有保持打开状态的能力。但是该事件停止了所有传播，甚至包括slideToggle。我不知道如何在子菜单下滑时保持下拉菜单的打开状态。

- NeoSketo

Answer 1

看起来你编写的函数出现了错误，因为event可能是未定义的。我将其更改为以下内容。但你可以通过下面的codepen链接查看它的实际效果。

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

如果您不想为每个可能具有子菜单的菜单项设置ID，则最好的方法是使用类。这样，您无需重新编码即可完成。我为您准备了一个codepen，展示了如何使用类作为标识符。我还添加了另一个带有子菜单的菜单项的示例供您参考。希望这可以帮助您！

- syciphj