Bootstrap 3 - 可折叠列表未正确折叠

Question

我正在使用Bootstrap 3来制作垂直可折叠导航菜单.文档看起来非常简单.尝试使用data-*标签来做到这一点.吻

当我展开一个新的部分时,我似乎无法让其他部分崩溃.即扩展和折叠工作在每个单独的项目上.但是,如果设置数据父级,则非活动部分应自动关闭.

有人可以指出我哪里出错了吗？

的jsfiddle

    <li><a data-toggle="collapse" data-parent="#menu" href="#one">One</a>
        <ul id="one" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

    <li><a data-toggle="collapse" data-parent="#menu" href="#two">Two</a>
        <ul id="two" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

</ul>

Answer 1

啊......面板类是诀窍...... Javascript必须使用它们作为选择器.

来自bootstrap.js: this.$parent.find('> .panel > .in')

通过将面板类添加到父列表元素,折叠现在可以正常工作.也许Twitter可以使这个功能更具通用性？但它现在正在运作.希望这不是一个黑客......

谢谢你的线索......

<ul id="menu">

    <li class="panel">
        <a data-toggle="collapse" data-parent="#menu" href="#one">One</a>
        <ul id="one" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

    <li class="panel">
        <a data-toggle="collapse" data-parent="#menu" href="#two">Two</a>
        <ul id="two" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

    <li class="panel">
        <a data-toggle="collapse" data-parent="#menu" href="#three">Three</a>
        <ul id="three" class="collapse">
            <li><a href="#">Point One</a></li>
            <li><a href="#">Point Two</a></li>
            <li><a href="#">Point Three</a></li>
        </ul>
    </li>

</ul>