擴展和折疊bootstrap手風琴

Question

我在我的頁面上有未知數量的手風琴控件，我通過循環結果在運行時為它們生成id：

<div class="panel-group" id="accordionMessagesSetup">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
                    <span class="glyphicon glyphicon-chevron-up"></span>
                    Message Setup
                </a>
            </h4>
        </div>
        <div id="collapseMessagesSetup" class="panel-collapse collapse in">
            <div>
                <p style="background-color: red"> Someting ELSE in here</p>
                <p style="background-color: red"> Someting ELSE2 in here</p>
            </div>
        </div>
    </div>
</div>

上面的代碼現場演示： http ： //www.bootply.com/jDrg0bMiiV

如何通過按下按鈕來折疊或展開它們？ （例如頁面上的“全部折疊”按鈕和頁面上的“全部展開”按鈕。）

Answer 1

在您的示例中，您只需使用bootstrap collapse方法編寫兩個按鈕代碼：

• .collapse('show')
• .collapse('hide')

---

// SHOW BUTTON:
$("#collapse_show").click(function(e) {
    $(".panel-collapse").collapse("show");
});

// HIDE BUTTON:
$("#collapse_hide").click(function(e) {
   $(".panel-collapse").collapse("hide");
});

演示

Answer 2

您可以使用折疊（'切換'） ：

 $(function () { $('#toggleAccordions').on('click', function(e) { $('.panel-collapse').collapse('toggle'); }) }); 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <button id="toggleAccordions">Collapse / Expand All</button> <div class="panel-group" id="accordionMessagesSetup"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup"> <span class="glyphicon glyphicon-chevron-up"></span> Message Setup </a> </h4> </div> <div id="collapseMessagesSetup" class="panel-collapse collapse in"> <div> <p style="background-color: red"> Someting ELSE in here</p> <p style="background-color: red"> Someting ELSE2 in here</p> </div> </div> </div> </div> <div class="panel-group" id="accordionMessagesSetup1"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup"> <span class="glyphicon glyphicon-chevron-up"></span> Message Setup </a> </h4> </div> <div id="collapseMessagesSetup1" class="panel-collapse collapse in"> <div> <p style="background-color: red"> Someting ELSE in here</p> <p style="background-color: red"> Someting ELSE2 in here</p> </div> </div> </div> </div> <div class="panel-group" id="accordionMessagesSetup2"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup"> <span class="glyphicon glyphicon-chevron-up"></span> Message Setup </a> </h4> </div> <div id="collapseMessagesSetup2" class="panel-collapse collapse in"> <div> <p style="background-color: red"> Someting ELSE in here</p> <p style="background-color: red"> Someting ELSE2 in here</p> </div> </div> </div> </div> 

Answer 3

只需創建id靜態的一部分（id =“collapsible”），然后使用jQuery通配符。

在你的按鈕中你可以做這樣的事情$（“id ^ = collapsable”“）。collapse（'toggle'）;

這將匹配任何使用可折疊的id開始並切換它。

Answer 4

我在當前項目中做到了這一點。 以下是如何在javascript中執行此操作：

    $("#your_button").click(function(event) 
    {
        // if you use an hyperlink like I do
        event.preventDefault();
        $(this).blur();

        var hideAll = true;
        $(".panel-details").each(function() 
        {
            if (!$(this).hasClass("in")) {
                hideAll = false;
            }
        });
        $(".panel-details").collapse(hideAll ? "hide" : "show");
    });

小組看起來像這樣：

<div class='panel'>
    <a data-parent='#accordion' data-toggle='collapse' href='#'>
        <div class='panel-heading'>
            <h4 class='panel-title'>
                Panel title
            </h4>
        </div>
    </a>
    <div class="panel-details panel-collapse collapse <?=$firstPanel?'in':''?>">
        <div class='panel-body'>Panel content</div>
    </div>
</div>