Bootstrap Collapse force 展开全部答案

【问题标题】：Bootstrap Collapse force expand allBootstrap Collapse force 展开全部
【发布时间】：2013-02-08 06:27:16
【问题描述】：

我有很多不同的部分，它们都有自己的折叠元素。我已经实现了 jquery 来展开和折叠它们。

jQuery:

$('.collapse').each(function (index) {
    $(this).collapse("toggle");
});

HTML 片段：

<ul class="nav nav-tabs">
    <li class="active" id="General"><a href="#">General</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane active">                                                                                                                                                                             
        <div class="accordion" id="accordion2">                                                
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseFour">Q. Can I choose my own Username and Password?</a>
                </div>
                <div id="collapseFour" class="accordion-body collapse">
                    <div class="accordion-inner">A. Yes, you can choose your own Username and Password.  We suggest using your email address for your Username, but any username that is between 8 and 20 characters long could be used.  A secure Password should be 8 to 20 characters long, with no spaces, and contains at least one special character.  </div>
                </div>
            </div>
            <div class="accordion-group">
                <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#generalQuestions" href="#collapseFive">Q. Can I update by email address online?</a>
                </div>
                <div id="collapseFive" class="accordion-body collapse">
                    <div class="accordion-inner">A. Yes, but I have no idea how right now.  </div>
                </div>
            </div>
        </div>
    <a href="#top" class="btn btn-mini top"><i class="icon-arrow-up"></i> Back To Top</a>
</div>

http://jsfiddle.net/RmK2h/

我遇到了几个不同的问题。

在 Internet Explorer 中，该功能仅在第二次单击时有效，并且非常跳跃。在第二次单击时，按钮文本不正确。
如果我打开其中一个元素，然后单击展开按钮，所有元素都会展开，但最初打开的元素除外，它会折叠。本质上，.collapse("toggle") 功能只是将模式更改为打开或关闭，而不关心它已经处于的状态。

【问题讨论】：

标签： jquery twitter-bootstrap collapse

【解决方案1】：

看起来 IE 问题是 Bootstrap 的问题。从谷歌搜索一下，看起来collapse 功能以某种形式在所有其他版本中中断。所以，除非你使用 collapse 函数以外的东西，否则我不确定你是否能够解决这个问题。我在 IE 中修复了它（展开/折叠按钮不再不同步）并用这段代码修复了你的第二个问题：

$('.expandcollapse').click(function () {
    if ($(this).html() == "<i class=\"icon-white icon-plus-sign\"></i> Expand All") {
        $('.collapse:not(.in)').each(function (index) {
            $(this).collapse("toggle");
        });
        $(this).html("<i class=\"icon-white icon-minus-sign\"></i> Collapse All");
    }
    else {
        $('.collapse.in').each(function (index) {
            $(this).collapse("toggle");
        });
        $(this).html("<i class=\"icon-white icon-plus-sign\"></i> Expand All");
    };
});

Fiddle

【讨论】：

【解决方案2】：

Samsquanch's solution 工作正常，但在我的情况下，我仍然能够偶尔让collapse 不同步。

原因是数据属性data-parent="#selector" 与想要的"expand all" 行为冲突。 Bootstrap 文档指出：

要将手风琴式的组管理添加到可折叠控件，请添加数据属性data-parent="#selector"。

因此，当需要"expand all" 功能时，最好保留该数据属性或在扩展之前将其删除。

【讨论】：