Bootstrap收起力将全部展开 [英] Bootstrap Collapse force expand all

问题描述

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

I have a bunch of different sections that have their own collapse elements. I have already implemented the jquery to expand and collapse them.

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/

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

There are a couple different problems I'm having.

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

1. In Internet Explorer the functionality only works on the second click and is very jump. With it working on the second click the button text is incorrect.
2. If I open one of the elements and then click the expand button all elements expand except the one that was originally opened, it collapses. Essentially the .collapse("toggle") functionality simply changes the mode to either open or closed it isn't concerned with the state it's already in.

推荐答案

看来IE问题是Bootstrap的问题.略过谷歌搜索，似乎collapse功能在每种其他发行版中都以某种形式破坏.因此，除非您使用collapse函数以外的其他函数，否则我不确定您是否能够解决该问题.我已在IE中对其进行了修复(扩展/折叠按钮不再脱离同步)，并使用此代码修复了您的第二个问题:

It looks like the IE problem is an issue with Bootstrap. From Googling a bit, it looks like the collapse functionality breaks in every other release in some form or another. So, unless you go with something other than the collapse function I'm not sure you're going to be able to fix that. I sort of fixed it in IE (the expand/collapse buttons don't get out of sync anymore) and fixed your second problem with this code:

$('.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");
    };
});

小提琴

这篇关于Bootstrap收起力将全部展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！