Почему не работает опция «Развернуть все / Закрыть все» для Accordion Collapse? - PullRequest
0 голосов
/ 21 сентября 2018

Пожалуйста, посмотрите фрагмент ниже.Все складные элементы открываются по умолчанию.Когда я нажимаю Закрыть все , они все закрываются.Когда я нажимаю Открыть все , открывается только верхняя.Если я продолжу нажимать Открыть все , он просто переключит первый и второй складные элементы.

Я думаю, что у меня настроен сценарий, чтобы свернуть при отображении и показать при скрытии.

Что мне здесь не хватает?

$('.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 голосов
/ 21 сентября 2018

Это была чертовски запутанная проблема.

Но это не сработает.То, как BS (то, что я люблю называть Bootstrap) обрабатывает аккордеоны, позволяет открывать только один за раз.Поэтому, когда вы открываете один, все остальные закрываются.

Я не смог найти способ сделать это в рамках BS;Вы можете попытаться найти способ обойти это самостоятельно.Если я найду способ сделать это, я обновлю этот ответ.

Bootstrap Accordion Docs: https://getbootstrap.com/docs/4.1/components/collapse/#options

...