javascript - Why isn't this Accordion Collapse "Open All/ Close All" option working?
问题描述
Please see the snippet below. All collapsible items are opened by default. When I click Close All, they all close. When I click Open All, only the top one opens. If I continue to click Open All, it simply toggles the first and second collapsible elements.
I think I have the script set up to collapse if showing, and show if hiding.
What am I missing here?
$('.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 & 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>
解决方案
这是一个令人困惑的问题。
但它不会起作用。BS(我喜欢称之为 Bootstrap)处理手风琴的方式只允许一次打开一个。因此,当您打开一个时,所有其他的都会关闭。
我无法在 BS 的框架内找到一种方法来做到这一点。你可以自己想办法解决这个问题。如果我找到办法,我会更新这个答案。
引导手风琴文档:https ://getbootstrap.com/docs/4.1/components/collapse/#options
推荐阅读
- nginx - 我怎么能这样?向 webpack 发送请求,如果响应为 404,则请求 webpack "/inidex.html":?
- c# - EF Core 配置复杂类型
- ios - FirebaseApp.configuration() 未解析的标识符
- flutter - 在停止处获取颜色以进行渐变
- python - 我正在尝试在 Python 中创建一系列随机数
- python - xlwings 图表和形状
- python - 无法解析功能:来自无效参数的 goog:chromeOptions:无法识别的 chrome 选项:首选项
- node.js - TypeError:GraphQLObjectType 不是构造函数
- mysql - 需要以 2020 年 1 月、2019 年 2 月、... 的格式显示数据,使用 SQL
- python - 拒绝 latin1_swedish_ci 以外的所有排序规则