7

我一直在四处寻找我遇到的相同问题的示例，但还没有运气。我正在尝试使用 bootstrap.js 在引导程序中创建多级可折叠侧导航。

我的问题是我在第二级添加了，但是当我单击列表项以触发它打开它时，它会折叠整个菜单。当我重新打开菜单时，二级菜单也打开了。我的代码如下：

          <div class="sidebar-nav">
      <p class="sidenav-header">Units and Lessons:</p>
      <ul class="nav nav-list">
        <li class="nav-header" data-toggle="collapse" data-target="#content-areas"> <span class="nav-header-primary">
                Content Areas
        </span>
            <ul class="nav nav-list collapse" id="content-areas">
                <li><a href="#" title="Title">All</a></li>
                <li><a href="#" title="Title">Urban Planning</a></li>
                <li><a href="#" title="Title">Sustainability</a></li>
                <li><a href="#" title="Title">Public Administration</a></li>
                <li data-toggle="collapse" data-target="#nav-health" data-parent="#content-areas"><a href="#" title="Title">Health</a>
                  <ul class="nav-secondary nav-list collapse" id="nav-health">
                    <li><a href="#" title="Title">Introduction</a></li>
                    <li><a href="#" title="Title">Lesson: What is Epilepsy?</a></li>
                    <li><a href="#" title="Title">Lesson: Pathology</a></li>
                  </ul>
                </li>
            </ul>
        </li>
          <li class="nav-header" data-toggle="collapse" data-target="#languages"> <span class="nav-header-primary">
                Languages
        </span>
            <ul class="nav nav-list collapse" id="languages">
                <li><a href="#" title="Title">All</a></li>
                <li><a href="#" title="Title">Arabic</a></li>
                <li><a href="#" title="Title">Turkish</a></li>
                <li><a href="#" title="Title">Hebrew</a></li>
            </ul>
        </li>
    </ul>  

      </div>

我正在谈论的特定部分位于“内容区域”下的“健康”列表项下。

任何帮助是极大的赞赏。谢谢！

4

2 回答 2

6

您的标记的问题是，当您尝试在列表中单击时，整个菜单都被折叠了。例如，如果您单击内容区域内的全部，则会折叠内容区域。第二级菜单（在您的情况下为“健康”）也发生了同样的情况。

这是因为您没有指定手风琴标题。查看Bootstrap Collapse 文档，您将在其中找到如下示例：

<div class="accordion-heading">
  <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
    Collapsible Group Item #1
  </a>

指定标题后，您的二级导航应该可以正常工作。

我创建了一个小提琴供您验证。我根据文档修改了内容区域，二级菜单运行良好。但是，我没有修改语言菜单项，以便您可以看到它的作用（一旦语言展开，请尝试在列表中单击）

于 2013-09-10T21:44:43.980 回答
5

虽然与 Pitamber 的示例类似，但我不会添加一些额外的类，尤其是带有“accoridan-heading”类的额外div，只需将该类应用到a标签即可。

<ul class="nav nav-list">
  <li>
    <a>Menu Item with No Sub-Items</a>
  </li>
  <li>
    <a class="accordion-heading" data-toggle="collapse" data-target="#submenu">
      <span class="nav-header-primary">Menu Item with Sub-Items <b class="caret"></b></span>
    </a>
    <ul class="nav nav-list collapse" id="submenu">
      <li><a href="#" title="Title">Sub Item 1</a></li>
      <li><a href="#" title="Title">Sub Item 2</a></li>
      <li><a href="#" title="Title">Sub Item 3</a></li>
      <li><a href="#" title="Title">Sub Item 4</a></li>
    </ul>
  </li>
</ul>

您可以进一步添加 CSS 和/或一些 JS 以在子菜单上放置一些对比，还可以在菜单项展开和折叠时翻转/更改插入符号图标。

于 2014-01-10T21:14:45.380 回答