我一直在四处寻找与我遇到的相同问题的示例,但还没有成功。我正在尝试使用 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>
我说的具体部分在“内容领域”下的“健康”列表项下。
非常感谢任何帮助。谢谢!
最佳答案
您的标记存在问题,当您尝试在列表中单击时,整个菜单会折叠。例如,如果您单击内容区内的全部,它会折叠内容区。同样的情况也发生在二级菜单上,在你的情况下是健康。
这是因为您没有指定 Accordion 标题。查看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 修改了内容区二级菜单运行良好。但是,我没有修改 Languages 菜单项以便您可以看到它是如何工作的(尝试在 Languages 展开后在列表中单击)
关于javascript - 多级可折叠 Bootstrap 侧边导航菜单的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18627336/