3

独自の折りたたみ要素を持つさまざまなセクションがたくさんあります。それらを展開および折りたたむために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/

私が抱えているいくつかの異なる問題があります。

  1. Internet Explorer では、この機能は 2 回目のクリックでのみ機能し、非常に高速です。2回目のクリックで機能すると、ボタンのテキストが正しくありません。
  2. 要素の 1 つを開いて展開ボタンをクリックすると、最初に開いた要素を除くすべての要素が展開され、折りたたまれます。基本的に、.collapse("toggle")機能は単にモードをオープンまたはクローズのいずれかに変更するだけで、すでにある状態には関係ありません。
4

2 に答える 2

2

IEの問題はBootstrapの問題のようです。グーグルから少し見るとcollapse、何らかの形で他のすべてのリリースで機能が壊れているように見えます。したがって、関数以外のものを使用しない限り、それcollapseを修正できるかどうかはわかりません。私はIEでそれを修正し（展開/折りたたみボタンが同期しなくなりました）、このコードで2番目の問題を修正しました：

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

フィドル

于 2013-02-22T16:31:12.720 に答える
1

Samsquanch のソリューションは正しく機能しますが、私の場合は、まだ時々collapse同期が外れることがあります。

その理由は、データ属性が必要な動作data-parent="#selector"と矛盾しているためです。"expand all"Bootstrap のドキュメントでは次のように指摘されています。

アコーディオンのようなグループ管理を折りたたみ可能なコントロールに追加するには、 data 属性を追加しますdata-parent="#selector"。

したがって、"expand all"機能が必要な場合は、そのデータ属性を除外するか、展開する前に削除することをお勧めします。

于 2013-07-01T11:11:12.120 に答える