多级可折叠引导侧导航菜单出现问题

我一直在寻找我遇到的相同问题的示例，但还没有运气。我正在尝试使用 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>

我所说的特定部分位于"内容区域"下的"健康"列表项下。

任何帮助将不胜感激。谢谢！