为什么这个手风琴折叠"Open All/ Close All"选项不起作用？

Question

请参阅下面的代码片段。默认情况下，所有可折叠项目都处于打开状态。当我单击"全部关闭"时，它们都关闭了。当我单击"全部打开"时，仅打开顶部。如果我继续单击"全部打开"，它只会切换第一个和第二个可折叠元素。

我想我已将脚本设置为在显示时折叠，如果隐藏则显示。

我在这里错过了什么？

$('.closeall').click(function(){
$('.accordion-collapse.show')
.collapse('hide');
});
$('.openall').click(function(){
$('.accordion-collapse:not(".show")')
.collapse('show');
});

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
			<section class="page-section" id="">
			  <div class="container">
				<div class="wow fadeIn">
					<h2 class="text-center">Speaker Content</h2>
					<div class="row">
						<div class="col-sm-12">
							<a href="#" class="btn btn-default openall">open all</a> <a href="#" class="btn btn-default closeall">close all</a>
						</div>
					</div>
					<div class="accordion" id="accordionExample">
					  <div class="card no-border">
						<div class="card-header no-bg" id="headingOne">
						  <h5 class="mb-0">
							<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#confReg" aria-expanded="true" aria-controls="confReg">
							  Conference Registration
							</button>
						  </h5>
						</div>
						<div id="confReg" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
						  <div class="card-body bg-ism-grey">
							Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
						  </div>
						</div>
					  </div>
					  <div class="card no-border">
						<div class="card-header no-bg" id="headingTwo">
						  <h5 class="mb-0">
							<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#bioHead" aria-expanded="false" aria-controls="bioHead">
							  Biography &amp; Headshot
							</button>
						  </h5>
						</div>
						<div id="bioHead" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
						  <div class="card-body bg-ism-grey">
							Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
						  </div>
						</div>
					  </div>
					  <div class="card no-border">
						<div class="card-header no-bg" id="headingThree">
						  <h5 class="mb-0">
							<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#hotelRes" aria-expanded="false" aria-controls="hotelRes">
							  Hotel Reservations
							</button>
						  </h5>
						</div>
						<div id="hotelRes" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-parent="#accordionExample">
						  <div class="card-body bg-ism-grey">
							Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
						  </div>
						</div>
					  </div>
					  <div class="card no-border">
						<div class="card-header no-bg" id="headingThree">
						  <h5 class="mb-0">
							<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#speakReimPol" aria-expanded="false" aria-controls="speakReimPol">
							  Speaker Reimbursement Policy
							</button>
						  </h5>
						</div>
						<div id="speakReimPol" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-parent="#accordionExample">
						  <div class="card-body bg-ism-grey">
							Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
						  </div>
						</div>
					  </div>
					  <div class="card no-border">
						<div class="card-header no-bg" id="headingThree">
						  <h5 class="mb-0">
							<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#ppPres" aria-expanded="false" aria-controls="ppPres">
							  PowerPoint Presentation
							</button>
						  </h5>
						</div>
						<div id="ppPres" class="accordion-collapse collapse show" aria-labelledby="headingThree" data-parent="#accordionExample">
						  <div class="card-body bg-ism-grey">
							Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
						  </div>
						</div>
					  </div>
					      				  
					</div>
				</div>
			  </div>
			</section>

Answer 1

这是一个令人困惑的问题。

但它行不通。BS(我喜欢称之为Bootstrap(处理手风琴的方式只允许一次打开一个手风琴.因此，当您打开一个时，所有其他关闭。

我无法在BS的框架内找到一种方法来做到这一点;你可以尝试自己找出一种方法。如果我找到一种方法，我会更新这个答案。

引导手风琴文档： https://getbootstrap.com/docs/4.1/components/collapse/#options

Answer 2

好吧，伙计们，我想我找到了这个问题的解决方案(Bootstrap 5(。

主要关注点是在"查看全部"状态之前关闭任何打开的手风琴，在"全部隐藏"状态之前打开任何关闭的手风琴也是如此。

编辑：我采用了这种方法，同时可以同时打开多个手风琴.我实际上还没有尝试过一次"只显示一个手风琴".

<script>
$('#btnviewall').on('click', function () {
console.log('clicked');
if ($(this).find('strong').text() == 'View All') {
$('.collapse').each(function (accordion) {
if ($(this).hasClass("show")) {
$(this).removeClass("show");
}
$(this).collapse('toggle');
})
$(this).find('strong').text('Hide All');
} else {
$('.collapse').each(function (accordion) {
if (!($(this).hasClass("show")) ) {
$(this).addClass("show");
}
$(this).collapse('toggle');
})
$(this).find('strong').text('View All');
}
});
</script>