jquery - 在我的应用程序的 3 个面板中展开所有元素后，Bootstrap Accordion 不起作用？

Question

当我单击Expand All它时，它会展开所有面板元素，然后通过单击每个面板来折叠面板。但是当我想展开 panel1、panel2 和 panel3 时出现问题。如果 panel2 展开，则 panel1 和 panel3 应折叠，依此类推。

$('#Expand').on('click', function() {
  $('#accordion .panel-collapse').collapse('show');
});

#Icon .collapse-toggle:after {
  font-family: 'Glyphicons Halflings';
  content: "\e114";
  float: right;
  color: grey;
}

#Icon .collapse-toggle.collapsed:after {
  content: "\e080";
}

    <a id="Expand" href="#">Expand All</a>
  </span>

  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading" id="Icon">
        <a class="collapse-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel1">panel1</a>
      </div>
      <div id="panel1" class="panel-collapse collapse">
        <div class="panel-body"></div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" id="Icon">
        <a class="collapse-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel2">panel2 </a>
      </div>
      <div id="panel2" class="panel-collapse collapse">
        <div class="panel-body"></div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading" id="Icon">
        <a class="collapse-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#panel3">panel3 </a>
      </div>
      <div id="panel3" class="panel-collapse collapse">
        <div class="panel-body"></div>
      </div>
    </div>
  </div>
</div>

标签： jquerytwitter-bootstrap-3

Answer 1

您可以使用https://codepen.io/creativedev/pen/mKWWYd

var chk = true;
$('#Expand').click(function() {
    $("#accordion .panel-collapse").each(function(i, v) {
        console.log(i);
        console.log(v);
        if ($(this).hasClass("in")) {
            chk = true;
            $(this).collapse('hide');
        } else {
            chk = false;
            $(this).collapse('show');
        }
    })
});

$('#accordion').on('show.bs.collapse', function() {
    if (chk) {
        $('#accordion .in').collapse('hide');
    }
});