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 methods编码两个按钮：

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

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

Demo

Answer 2

您可以使用collapse('toggle')：

$(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 =＆＃34; collapsible＆＃34;）然后使用jQuery通配符。

在你的按钮中你可以做类似这样的事情$（＆＃34; id ^ = collapsable）＆＃34;）。崩溃（＆＃39;切换＆＃39;）;

这将匹配任何以可折叠方式开始的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>

扩展和折叠bootstrap手风琴

4 个答案: