javascript – 多级可折叠Bootstrap侧导航菜单的麻烦

我一直在寻找一个同样问题的例子,但我没有运气.我正在尝试使用bootstrap.js在bootstrap中创建一个多级可折叠侧导航.

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

<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>

我正在讨论的具体部分是在“内容区域”下的“健康”列表项下.

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

解决方法

标记的问题是当您尝试在列表中单击时整个菜单会折叠.例如,如果单击“内容区域内的全部”,则会折叠“内容区域”.对于您的案例中的第二级菜单Health也是如此.

这是因为您没有指定手风琴标题.看看Bootstrap Collapse Documentation,你会发现这样的例子：

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

指定标题后,您的第二级导航应该可以正常工作.

我已经创建了一个fiddle供您验证.我根据Documentation 修改了内容区域,第二级菜单工作正常.但是,我没有修改语言菜单项,以便您可以看到它的行为(在语言扩展后尝试在列表中单击)

javascript – 多级可折叠Bootstrap侧导航菜单的麻烦

解决方法

猜你在找的JavaScript相关文章