代码之家  ›  专栏  ›  技术社区  ›  Millhorn

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

  •  0
  • Millhorn  · 技术社区  · 6 年前

    请看下面的片段。默认情况下,将打开所有可折叠项。当我点击 全部关闭 ,它们都很接近。当我点击 全部打开 ,只有最上面的一个打开。如果我继续点击 ,它只是切换第一个和第二个可折叠元素。

    我想我已经把脚本设置为显示时折叠,隐藏时显示。

    $('.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 回复  |  直到 6 年前
        1
  •  1
  •   yaakov    6 年前

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

    但这行不通。BS(我喜欢称之为Bootstrap)处理手风琴的方式只允许一次打开一个。所以当你打开一个的时候,其他的都关上了。

    我无法在BS的框架内找到这样做的方法;你可以自己想办法解决这个问题。如果我找到办法,我会更新这个答案。

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