12

Bootstrap 3アコーディオンを使用しており、動的パネルを追加する必要があります。私はこのようなものを持っています:

+------------------+
| Panel 1 (closed) |
+------------------+
| Panel 2 (opened) | <-- This is the template panel
| CONTENT          |
+------------------+
| Dynamic panels   | <-- All dynamic panels must be closed, not opened
+------------------+     after they are added

問題は、Panel 2が開かれると、動的パネル ( Panel 2から複製されたもの) が開かれることです。パネル 2を閉じると、動的パネルが閉じます。

すべての動的パネルを閉じて、ヘッダーがクリックされたときにのみ開きます (Bootstrap の例のように)。どうすれば修正できますか?

これは私のjQueryコードです。

var $template = $(".template");

var hash = 2;
$(".btn-add-panel").on("click", function () {
    var $newPanel = $template.clone();
    // I thought that .in class makes the panel to be opened
    $newPanel.find(".collapse").removeClass("in");
    $newPanel.find(".accordion-toggle").attr("href",  "#" + (++hash))
             .text("Dynamic panel #" + hash);
    $newPanel.find(".panel-collapse").attr("id", hash);
    $("#accordion").append($newPanel.fadeIn());
});

JSFiddle

4

1 に答える 1