扩展和折叠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>