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

Question

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

我想打开所有"组"手风琴，并保持子手风琴"计数1"和"计数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>

在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>

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