多级可折叠Bootstrap side-nav菜单出现问题 [英] Trouble with multi-level collapsible Bootstrap side-nav menu

问题描述

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

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

 < div class =sidebar-nav> 
< p class =sidenav-header>单位和课程：< / p> 
< ul class =nav nav-list> 
< li class =nav-headerdata-toggle =collapsedata-target =＃content-areas> < span class =nav-header-primary> 
内容区域
< / span> 
< ul class =nav nav-list collapseid =content-areas> 
< li>< a href =＃title =标题>全部< / a>< / li> 
< li>< a href =＃title =标题>城市规划< / a>< / li> 
< li>< a href =＃title =标题>可持续发展< / a>< / li> 
< li>< a href =＃title =标题>公共管理< / a>< / li> 
< li data-toggle =collapsedata-target =＃nav-healthdata-parent =＃content-areas>< a href =＃title =Title> ;健康与LT; / A> 
< ul class =nav-secondary nav-list collapseid =nav-health> 
< li>< a href =＃title =标题>简介< / a>< / li> 
< li>< a href =＃title =标题>课程：什么是癫痫症？< / a>< / li> 
< li>< a href =＃title =标题>课程：病理学< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
< / li> 
< li class =nav-headerdata-toggle =collapsedata-target =＃languages> < span class =nav-header-primary> 
语言
< / span> 
< ul class =nav nav-list collapseid =languages> 
< li>< a href =＃title =标题>全部< / a>< / li> 
< li>< a href =＃title =标题>阿拉伯语< / a>< / li> 
< li>< a href =＃title =标题>土耳其语< / a>< / li> 
< li>< a href =＃title =标题>希伯来语< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
 
< / div> 
  

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

非常感谢任何帮助。感谢！

解决方案

您的标记问题是当您尝试在列表中单击时整个菜单已折叠。例如，如果您单击内容区域内的全部，则会折叠内容区域。二级菜单中的情况也是如此，您的情况为Health。

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

 < div class =accordion-heading> 
< a class =accordion-toggledata-toggle =collapsedata-parent =＃accordion2href =＃collapseOne> 
可折叠的组别项目＃1 $​​ b $ b< / a> 
  

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

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

I've been combing around looking for an example of the same problem I'm having but no luck yet. I'm trying to create a multi-level collapsible side navigation in bootstrap using bootstrap.js.

My problem is that I've added in the second level but when I click the list item to trigger it to open it collapses the whole menu. When I re-open the menu, the second-level menu is open also. My code is below:

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

The specific section I'm talking about is under the "Health" list item under "Content Areas".

Any help is greatly appreciated. Thanks!

解决方案

The problem with your markup is that whole menu is collapsed when you try to click within the list. For example, if you click All inside of Content Areas it collapse the Content Areas. The same is happening for the second level menu, Health in your case.

This is caused because you don't have an accordion-heading specified. Take a look into Bootstrap Collapse Documentation where you will find an example like this:

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

Once you specify the heading your second level nav should work fine.

I have created a fiddle for you to verify. I modified the Content Areas according to the Documentation and the second level menu worked fine. However, I did not modify the Languages menu items so that you can see how it's acting (try clicking within the list once the Languages is expanded)

这篇关于多级可折叠Bootstrap side-nav菜单出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！