Twitter bootstrap 引导折叠导航li菜单

我正在尝试使用Bootstrap的崩溃插件，但收效甚微。我想要一个手风琴风格的导航菜单与隐藏的子菜单

我的HTML和JS：

 <ul class="nav nav-list">

    <li class="nav-header">
        <span>
            Home
            <span class="pull-right"  data-toggle="collapse">X</span>
        </span>
        <ul class="nav nav-list collapse in" id="test" >
            <li><a href="/ticket_list.cfm" title="Show list of tickets">Open Tickets</a></li>
            <li><a href="/account/" title="Edit user accounts">Accounts / Community</a></li>
        </ul>
    </li>  
  </ul>    
            <script type="text/javascript">
                $('.collapse').collapse()
            </script>

家
X






$（'.collapse'）.collapse（）

这应该行得通。当页面加载时，我可以看到ms的子菜单被隐藏，但我可以单击X或Home（主页），它不会展开

---

我已经包括了所有的JS并正确链接，我验证了这一点。我的子页面上还有一个accorion面板，折叠选项卡在那里工作。

在您的

li

中添加

数据目标


<li class="nav-header"  data-toggle="collapse" data-target="#test"> <span>

  <ul class="nav nav-list collapse" id="test">