Bootstrap手风琴展开/折叠全部未正常工作

Question

以下是破解的过程：

1. 点击音符符号
2. 点击展开/折叠全部
3. 点击音符符号
4. 点击展开/折叠全部
5. 再次点击展开/折叠全部

请注意，即使在函数中的逻辑表明所有面板都关闭且应该打开，音符符号仍然不会重新打开。为什么？我做错了什么？

HTML：

<button class="btn btn-default btn-sm btn-exp" id="expandAllFormats">Expand/Collapse All</button>
<div class="panel-group checkbox-group" id="accordionFormat" role="tablist" aria-multiselectable="true">

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatText" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatText">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text
</a>
</h4>
</div>
<div id="formatText" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ALPHA</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatArt" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatArt">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Art
</a>
</h4>
</div>
<div id="formatArt" class="panel-collapse collapse" aria-expanded="false" role="tabpanel">
<div class="panel-body">BETA</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatAudio" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatAudio">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Audio
</a>
</h4>
</div>
<div id="formatAudio" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">GAMMA</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatNotation" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatNotation">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Music Notation
</a>
</h4>
</div>
<div id="formatNotation" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">DELTA</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatVideo" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatVideo">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Video
</a>
</h4>
</div>
<div id="formatVideo" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">EPSILON</div>
</div>
</div>

<div class="panel panel-default">
<div class="panel-heading" role="tab">
<h4 class="panel-title">
<a id="accordionformatInteractive" class="collapsed" role="button" data-toggle="collapse" data-parent="#accordionFormat" href="#formatInteractive">
<i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Digital Interactive
</a>
</h4>
</div>
<div id="formatInteractive" class="panel-collapse collapse" role="tabpanel">
<div class="panel-body">ZETA</div>
</div>
</div>
</div>

JS:

var toggleFormat = false;
$('#expandAllFormats').on('click', function(e) {
        e.preventDefault();
        console.log(toggleFormat);
        $("#accordionFormat .panel-collapse").each(function(index, value){
            if (toggleFormat){
                if($(this).hasClass('in')){
                    $(this).collapse('toggle');
                    console.log("This panel is open. it will be closed");
                } else {
                    console.log("This panel is closed. it will stay closed");
                }
            } else {
                if(!$(this).hasClass('in')){
                    $(this).collapse('toggle');
                    console.log("This panel is closed. it will be open");
                } else {
                    console.log("This panel is open. it will stay open");
                }
            }

        });
        toggleFormat = toggleFormat ? false : true;
    });

- Murphy1976

---

我还应该注意，如果您点击音乐符号以重新打开它，它将打开该面板，但关闭所有其他面板... - Murphy1976

请检查我的答案并试一试。 - artemisian

你确定吗？我无法在我的答案片段中重现这个问题。 - artemisian

可能是因为代码片段使用的Bootstrap版本是bootstrap/3.3.7。 - artemisian

Answer 1

问题在于手风琴组件在使用 data-parent 时，所有面板的状态都与任何单个面板的状态不同。您的展开/折叠所有按钮处理程序需要完全覆盖正常的手风琴行为。

展开/折叠所有的点击处理程序必须跟踪最后的状态（展开全部或折叠全部），因为 Bootstrap 折叠组件单独处理每个单个面板的状态（一次只能打开一个）。否则，就无法确定是否打开或关闭各个切换面板。

$('#expandAllFormats').on('click', function () {

   if ($(this).data("lastState") === null || $(this).data("lastState") === 0) {

        // close all
        $('.collapse.in').collapse('hide');

        // next state will be open all
        $(this).data("lastState",1);
        $(this).text("Expand All");

    }
    else {

        // initial state...
        // override accordion behavior and open all
        $('.panel-collapse').removeData('bs.collapse')
        .collapse({parent:false, toggle:false})
        .collapse('show')
        .removeData('bs.collapse')
         // restore single panel behavior
        .collapse({parent:'#accordionFormat', toggle:false});

        // next state will be close all
        $(this).data("lastState",0);
        $(this).text("Collapse All");
    }

});

http://codeply.com/go/76Hl6s49rb

当然，另一种方法是简单地删除data-parent=属性并完全禁用手风琴行为。

- Zim

Answer 2

如果您能够承受将数据父属性 data-parent="#accordionFormat" 从所有存在该属性的元素中删除，这将解决您的问题。

为什么？我不确定，但似乎该属性会触发某些逻辑，影响折叠功能。

var toggleFormat = false;
$('#expandAllFormats').on('click', function (e) {
    e.preventDefault();
    console.log(toggleFormat);
    $("#accordionFormat .panel-collapse").each(function (index, value) {
        if (toggleFormat) {
            if ($(this).hasClass('in')) {
                $(this).collapse('toggle');
                console.log("This panel is open. it will be closed");
            } else {
                console.log("This panel is closed. it will stay closed");
            }
        } else {
            if (!$(this).hasClass('in')) {
                $(this).collapse('toggle');
                console.log("This panel is closed. it will be open");
            } else {
                console.log("This panel is open. it will stay open");
            }
        }

    });
    toggleFormat = toggleFormat ? false : true;
});

<html>
<head>
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
<button class="btn btn-default btn-sm btn-exp" id="expandAllFormats">Expand/Collapse All</button>

<div class="panel-group checkbox-group" id="accordionFormat" role="tablist" aria-multiselectable="true">

    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <a id="accordionformatText" role="button" data-toggle="collapse" href="#formatText">
                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Text
                </a>
            </h4>
        </div>

        <div id="formatText" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">ALPHA</div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <a id="accordionformatArt" class="collapsed" role="button" data-toggle="collapse" href="#formatArt">
                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Art
                </a>
            </h4>
        </div>

        <div id="formatArt" class="panel-collapse collapse" aria-expanded="false" role="tabpanel">
            <div class="panel-body">BETA</div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <a id="accordionformatAudio" class="collapsed" role="button" data-toggle="collapse" href="#formatAudio">
                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Audio
                </a>
            </h4>
        </div>

        <div id="formatAudio" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">GAMMA</div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <a id="accordionformatNotation" class="collapsed" role="button" data-toggle="collapse"
                   href="#formatNotation">
                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Music Notation
                </a>
            </h4>
        </div>

        <div id="formatNotation" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">DELTA</div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <a id="accordionformatVideo" class="collapsed" role="button" data-toggle="collapse" href="#formatVideo">
                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Video
                </a>
            </h4>
        </div>

        <div id="formatVideo" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">EPSILON</div>
        </div>
    </div>

    <div class="panel panel-default">
        <div class="panel-heading" role="tab">
            <h4 class="panel-title">
                <a id="accordionformatInteractive" class="collapsed" role="button" data-toggle="collapse"
                   href="#formatInteractive">
                    <i class="fa fa-chevron-circle-right" aria-hidden="true"></i> Digital Interactive
                </a>
            </h4>
        </div>

        <div id="formatInteractive" class="panel-collapse collapse" role="tabpanel">
            <div class="panel-body">ZETA</div>
        </div>
    </div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

- artemisian

---

完全与问题无关，但是您的这个小提示解决了我的问题——能够展开任何部分并保持其展开状态。也就是说，完全忽略了当您展开第一部分然后展开第二部分时，第一部分会折叠的功能。谢谢。 - Robert