为什么手风琴折叠“全部打开/全部关闭”选项不起作用？

时间：2018-09-20 22:56:12

标签： javascript html css accordion bootstrap-accordion

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

我认为我已将脚本设置为在显示时折叠，在隐藏时显示。

我在这里想念什么？ 

$('.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>

1 个答案:

答案 0 :(得分：1)

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

但是它不起作用。 BS（我喜欢称之为Bootstrap）处理手风琴的方式只能一次打开一个手风琴。因此，当您打开一个窗口时，其他所有窗口都会关闭。

我无法找出在BS框架内实现此目标的方法；您可以尝试自己解决此问题。如果我找到解决办法，我将更新此答案。

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

相关问题
最新问题