8

我正在使用引导程序 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>
4

4 回答 4

9

它在引导文件中说：

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

所以它必须与面板组一起使用，但无论如何您都可以覆盖 javascript。

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

于 2014-03-08T01:32:38.087 回答
7

我也无法让它工作 - 这可能与 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');
});​

这个小提琴展示了它的作用。

于 2012-12-02T12:37:50.127 回答
7

也一直在与 bootstrap 崩溃作斗争。我试图做一些稍微不同的事情。我想要内联切换行为。请参阅下面的我的 JS 小提琴。我发现，除了他们的文档中涵盖的 data-parent 属性之外，bootstrap 似乎还需要存在“accordion-group”div。因此，要么 JS 中存在错误，要么他们的文档不包含它。我还必须将手风琴组 div 上的样式归零...

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>
于 2013-03-25T19:47:16.330 回答
5

You have to use accordion-group class in your items, see issue https://github.com/twitter/bootstrap/issues/4988

于 2013-04-08T14:41:44.143 回答