如何打开所有顶级手风琴但保持嵌套手风琴关闭？

Question

我有一个手风琴，其中所有项目都有另一个嵌套的手风琴。我正在尝试通过单击按钮打开第一级手风琴，而不打开嵌套的手风琴。

我想打开所有“组”-手风琴，并关闭子手风琴“Count 1”和“Count 2”。

我该怎么做？

$(document).ready(function() {
  // Collapse inner groups:
  $('#p-lists').on('hide', function(e) {
    // Force a collapse (.hide() doesn't seem to work properly here but is unnecessary anyway):
    $(e.target).find('.accordion-body')
      .removeClass('in')
      .attr('style', '');
  });

  // Make sure parent groups are also opened:
  $('#p-lists').on('show', function(e) {

    var $parent = $(e.target).parents('.accordion-body');
    // Collapse all siblings:
    $parent.parents('.accordion-group')
      .prevAll('.accordion-group').find('.accordion-body').collapse('hide')
      .nextAll('.accordion-group').find('.accordion-body').collapse('hide');
    // Then open THIS parent:
    $parent.collapse('show');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />


<h3>Accordion test</h3>

<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#p-counts-2">Open counts 2</button>
<div class="accordion" id="p-lists">
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#p-lists" href="#p-lists-1">
        <h5>Group 1</h5>
      </a>

    </div>
    <div id="p-lists-1" class="accordion-body collapse">
      <div class="accordion-inner">Body p1</div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#p-lists" href="#p-lists-2">
        <h5>Group 2</h5>
      </a>

    </div>
    <div id="p-lists-2" class="accordion-body collapse">
      <div class="accordion-inner">
        <h4>Inner accordion</h4>

        <!-- Start of inner -->
        <div class="accordion" id="p-counts">
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#p-counts" href="#p-counts-1">
                <h5>Counts 1</h5>
              </a>

            </div>
            <div id="p-counts-1" class="accordion-body collapse">
              <div class="accordion-inner">Counts p1</div>
            </div>
          </div>
          <div class="accordion-group">
            <div class="accordion-heading">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#p-counts" href="#p-counts-2">
                <h5>Counts 2</h5>
              </a>

            </div>
            <div id="p-counts-2" class="accordion-body collapse">
              <div class="accordion-inner">Counts p2</div>
            </div>
          </div>
        </div>
        <!-- end of inner -->
      </div>
    </div>
  </div>
  <div class="accordion-group">
    <div class="accordion-heading">
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#p-lists" href="#p-lists-3">
        <h5>Group 3</h5>
      </a>

    </div>
    <div id="p-lists-3" class="accordion-body collapse">
      <div class="accordion-inner">Body p3</div>
    </div>
  </div>
</div>

View on jsFiddle

Answer 1

所以， 在您单击按钮时，我们检查是否有任何子手风琴已打开，如果是，我们将其关闭； 在正常的手风琴面板点击上，我们不会故意关闭子手风琴；

片段如下：

$(document).ready(function() {

  $('#myBtn').click(function() {
    ($('#group1').hasClass('collapsed')) ? $("a#group1").trigger('click'): '';
    ($('#group2').hasClass('collapsed')) ? $("a#group2").trigger('click'): '';
    ($('#group3').hasClass('collapsed')) ? $("a#group3").trigger('click'): '';
    $("a.accordion-toggle-inner:not('.collapsed')").each(function() {
      $(this).trigger('click');
    });
  });

});

#group1,
#group2,
#group3 {
  color: red;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

<div class="container">

  <button id='myBtn' type="button" class="btn btn-warning" data-toggle="collapse"> open the first level of
            accordions by clicking on the button, without opening nested accordions</button>


  <div class="accordion">
    <a class="accordion-toggle collapsed" data-toggle="collapse" id='group1' href="#p-lists-1">
      <h5>Group 1</h5>
    </a>
    <div id="p-lists-1" class="accordion-body collapse">
      Body p1
    </div>


    <div class="accordion-group">
      <a id='group2' class="accordion-toggle  collapsed" data-toggle="collapse" href="#p-lists-2">
        <h5>Group 2</h5>
      </a>

      <div id="p-lists-2" class="accordion-body collapse">
        <div class="accordion-inner">
          <h4>Inner accordion</h4>

          <!-- Start of inner -->
          <div class="accordion" id="p-counts">
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle collapsed accordion-toggle-inner" data-toggle="collapse" href="#p-counts-1">
                  <h5>Counts 1</h5>
                </a>

              </div>
              <div id="p-counts-1" class="accordion-body collapse">
                <div class="accordion-inner">Counts p1</div>
              </div>
            </div>
            <a class="accordion-toggle collapsed accordion-toggle-inner" data-toggle="collapse" data-parent="#p-counts" href="#p-counts-2">
              <h5>Counts 2</h5>
            </a>
            <div id="p-counts-2" class="accordion-body collapse">
              Counts p2
            </div>
          </div>
          <!-- end of inner -->
        </div>
      </div>
    </div>

    <a class="accordion-toggle  collapsed" data-toggle="collapse" id='group3' href="#p-lists-3">
      <h5>Group 3</h5>
    </a>
    <div id="p-lists-3" class="accordion-body collapse"> Body p3</div>
  </div>

更新：根据上述提问者的评论