Question

我已经构建了一个带有多个子菜单的堆叠导航。

<ul class="nav nav-pills nav-stacked">
  <li data-toggle="collapse" data-target="#subnav">
    Nav
    <ul class="nav nav-pills collapse" id="subnav">
        <li><a href="#">Subnav1</a></li>
        <li><a href="#">Subnav2</a></li>
        <li><a href="#">Subnav3</a></li>
    </ul>
  </li>
</ul>

单击父级时，子菜单将很好地打开。但是，当我单击任何子项时，父菜单将再次关闭。我该如何防止这种情况？

修改：试用jsFiddle

Answer 1

一种方法是从可折叠的......中提取触发元素。

<强> Bootply

HTML ：

<ul class="nav nav-pills nav-stacked">
  <li>
    <span data-toggle="collapse" data-target="#subnav">Nav</span>   
    <ul class="nav nav-pills collapse" id="subnav">
        <li><a href="#">Subnav1</a></li>
        <li><a href="#">Subnav2</a></li>
        <li><a href="#">Subnav3</a></li>
    </ul>
  </li>
</ul>

Answer 2

你可以这样做：

$("#subnav").on( "click.bs.collapse.data-api", function(e) {
    e.stopPropagation();
});

单击导航中的子项目时防止折叠

2 个答案: