web-dev-qa-db-ja.com

Bootstrap 3 collapseは、プログラムでパネルを開いた後に複数のパネルを開くことができます

bootstrap 3 collapseに問題があります。パネルをプログラムで開いた後、最初のパネルを再度開いている間、別のパネルを開いたままにすることができます。

私[〜＃〜] html [〜＃〜]：

<button type="button" class="btn showpanel">Show panel 3</button>
<button type="button" class="btn hidepanel">Hide panel 3</button>
<button type="button" class="btn openpanel">Open panel 3</button>
<button type="button" class="btn closepanel">Close panel 3</button>
<hr/>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1">Panel 1</a>
            </h4>
        </div>
        <div id="panel1" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 1
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2">Panel 2</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 2
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3">Panel 3</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 3
            </div>
        </div>
    </div>
</div>

そしていくつかJavaScript：

$(".hidepanel").on("click", function() {
    $("#panel3").parent().hide();
});
$(".showpanel").on("click", function() {
    $("#panel3").parent().show();
});
$(".openpanel").on("click", function() {
    $("#panel3").collapse('show');
});
$(".closepanel").on("click", function() {
    $("#panel3").collapse('hide');
});

この問題を実証する私のjsfiddle

再現するには：

  1. 「パネル3を開く」ボタンをクリックします。
  2. 「パネル2」をクリックして開きます。これまでのところ問題ありません。
  3. 「パネル3」をクリックして、もう一度開きます。パネル2は開いたままです！

プログラムでパネルを開くと、パネルの状態に関するブートストラップの内部登録が台無しになりそうですか？ 3番目のパネルの「状態の変更」に目に見える問題はありません（予想どおり、クラスが「崩壊」から「中」に、またその逆に変更されます）。

twitter-bootstraptwitter-bootstrap-3collapse
17
Moolie

パネルが表示される直前に発生するcollapse showイベントのハンドラーを作成できます。

これを追加して、選択したパネルが表示される前に他の開いているパネルが閉じられるようにします。

$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});

ブートプライデモ

collapseイベントの詳細については、こちらをご覧ください： http://getbootstrap.com/javascript/#collapse

28
Zim

問題は、開いているパネルを変更する方法によるものだと思います。 「表示」機能を使用するのではなく、適切なパネルリンクでクリックイベントを発生させる必要があります。たとえば、IDが「accordion」で、3つのパネルがあるアコーディオンの場合、2つのパネルを表示するには次を使用します。

$("a[href=#accordion-2]").click()

または、2番目のパネルに指定したID（twitterboostrapmvcを使用しているため、パネルIDはアコーディオンIDから自動生成されます）。

2
ProfNimrod

（href属性ではなく）data-target属性を使用してアコーディオンを制御する場合、これはProfNimrodの回答の適応であり、ターゲットが現在非表示の場合に関連する要素をクリックします。 （ifチェックは、デフォルトで適用されるcollapsedクラスを使用してアコーディオンを設定することに依存していることに注意してください。これは cssを使用してシェブロンアイコンアコーディオンで ）。

var expandAccordion = function() {
    var header = $('[data-target="#accordion-0"]');
    if (header.hasClass('collapsed')) {
        header.click();
    }
}
0
Tim