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>

Answer 1

它在Bootstrap文档中说:

如果提供了选择器,则在显示此可折叠项目时,将关闭指定父级下的所有可折叠元素.(类似于传统的手风琴行为 - 这取决于 panel班级)

所以它必须与面板组一起使用,但你仍然可以覆盖javascript.

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

Answer 2

我无法让这个工作 - 这可能是Bootstrap JS中与你使用列表而不是div相关的事情？

为了让它工作,我不得不重写click事件.基于这个问题:可折叠手风琴在dropdpwn菜单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');
});?

这个小提琴显示它在行动.

Answer 3

一直在努力解决自助式崩溃问题.我试图做一些稍微不同的事情.我想要内联切换行为.看下面我的JS小提琴.我发现除了docs中包含的data-parent属性之外,bootstrap似乎还需要存在"accordion-group"div.因此,要么JS中存在错误,要么他们的文档不包含它.我也不得不把手风琴组的风格归零......

http://jsfiddle.net/cssguru/SRFFJ/

<div id="accordion2">
   <div class="accordion-group" style="border:0;padding:0;margin:0">
      <div id="collapseOne" class="collapse in">
            Foo Bar...
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
               Show Herp Derp
            </a>
      </div>
      <div id="collapseTwo" class="collapse">
            Herp Derp...
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
               Show Foo Bar
            </a> 
      </div>
   </div>
</div>

Answer 4

您必须在您的项目中使用accordion-group类,请参阅问题https://github.com/twitter/bootstrap/issues/4988