Bootstrap 崩溃数据父不工作

Question

我正在使用 bootstrap 2.2.1，但出于某种原因，data-parent 属性没有按预期执行。当我单击另一个目标时，它不会关闭以前打开的目标。这是下面代码的 小提琴，关于如何解决这个问题的任何想法？

 <div id="accordion">
    <ul>
        <li>
            <a href="#" data-toggle='collapse' data-target='#document', data-parent='#accordion'>option 1</a>
            <ul id="document" class="collapse">
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
            </ul>
        </li>
        <li>
            <a href="#">option 2</a>
        </li>
        <li>
            <a href="#">option 3</a>
        </li>
         <li>
            <a href="#" data-toggle='collapse' data-target='#document2', data-parent='#accordion'>option 4</a>
            <ul id="document2" class="collapse">
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
            </ul>
        </li>
    </ul>
</div>

原文由 mfreitas 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我也无法让它工作 - 这可能是 Bootstrap JS 中与您使用列表而不是 div 的事实有关的东西？

所以为了让它工作，我必须重写点击事件。基于这里的这个问题： Collapsible accordion doesn’t work inside a dropdpwn-menu Bootstrap

我向每个选项链接添加了一个 accordion-toggle 类，然后添加了以下 JavaScript 以使其工作：

 $(document).on('click', '.accordion-toggle', function(event) {
        event.stopPropagation();
        var $this = $(this);

        var parent = $this.data('parent');
        var actives = parent && $(parent).find('.collapse.in');

        // From bootstrap itself
        if (actives && actives.length) {
            hasData = actives.data('collapse');
            //if (hasData && hasData.transitioning) return;
            actives.collapse('hide');
        }

        var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7

        $(target).collapse('toggle');
});​

这个 小提琴 展示了它的实际效果。

原文由 mccannf 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

它在 Bootstrap 文档中说：

如果提供了选择器，则在显示此可折叠项时，指定父项下的所有可折叠元素都将关闭。 （类似于传统的手风琴行为 - _这取决于 panel 类_）

因此它必须与面板组一起使用，但您仍然可以覆盖 javascript。

http://getbootstrap.com/javascript/#collapse-options

原文由 Ian Zhao 发布，翻译遵循 CC BY-SA 3.0 许可协议