Bootstrap折叠导航li菜单

Question

我正在尝试使用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>

这应该工作.当页面加载时,我可以看到子菜单隐藏了一个ms.但我可以点击X或Home我想要的东西,它不会扩展.

我已经包含了所有JS并且正确链接了我验证了.我的子页面上还有一个accorion面板,折叠选项卡在那里工作.

Answer 1

加入data-target你的li.

小提琴

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

此外,如果你想让它最初折叠你不需要打电话,.collapse()你可以in从可折叠部分删除类.即

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