引导折叠数据父级不起作用

Posted

技术标签:

【中文标题】引导折叠数据父级不起作用【英文标题】:Bootstrap collapse data-parent not working 【发布时间】:2012-11-19 21:19:48 【问题描述】:

我正在使用引导程序 2.2.1,无论出于何种原因,data-parent 属性都没有达到预期的效果。当我单击另一个目标时,它不会关闭以前打开的目标。这是fiddle,代码如下,有什么解决办法吗?

<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>

【问题讨论】:

【参考方案1】:

它在引导文档中说:

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

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

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

【讨论】:

我无法说出 2012 年的情况,但这是我今天看到的正确答案。我逐步浏览了 Bootstrap 的 collapse.js,发现它依赖于(直接)在同一个父级的面板类下的目标。觉得这很聪明,然后看到你说的很准确,并指出了它在文档中的位置。 我要补充一下 - data-parent 应该代替 data-target 使用,而不是并排使用。 Bootstrap 4 是一样的,只是它是 .card 类而不是 .panel。【参考方案2】:

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

fiddle 展示了它的实际效果。

【讨论】:

我在我的项目中使用了你的代码,但它不适用于 IE9/8【参考方案3】:

也一直在为引导崩溃而苦苦挣扎。我试图做一些稍微不同的事情。我想要内联切换行为。请参阅下面的我的 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>

【讨论】:

jsfiddle 不再有效【参考方案4】:

您必须在您的项目中使用手风琴组类,请参阅问题 https://github.com/twitter/bootstrap/issues/4988

【讨论】:

以上是关于引导折叠数据父级不起作用的主要内容,如果未能解决你的问题,请参考以下文章

AngularJS 1.5- ui-router:在状态内调用组件,父级不起作用

当父级不从对象继承时,Python 2.x 超级 __init__ 继承不起作用

Bootstrap 4嵌套折叠“数据父级”不起作用

引导可折叠面板在 ng-if 内不起作用

如何从引导程序 V3.2.0 升级到 V5.1.2 -(按钮折叠不起作用)

引导崩溃()函数不起作用