【发布时间】：2021-05-01 15:51:40
【问题描述】：
我制作了一个在初始页面加载时工作的全部展开/全部折叠按钮。但是，如果我“手动”展开其中一个 div，那么它会保持打开状态并且不会响应“全部折叠”按钮。
重现问题：
- 点击野生动物->哺乳动物生物多样性->溪鳟查看溪鳟表
- 点击链接展开全部查看所有表格
- 单击全部折叠，Brook Trout 表保持打开状态
我在这里做了一个代码笔来解决这个问题：https://codepen.io/xanabobana/pen/pobRxpx
我的 HTML：
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-right">
<a id="expand-all" href="javascript:void(0);">Expand All</a>
</div>
</div>
<div class="row">
<div class="col">
<div class="card mb-3">
<div class="card-header justify-content-between d-flex align-items-center text-white bg-info">
<h4>Wildlife</h4>
<a class="category_carat"><i class="fa fa-caret-right"></i></a>
</div>
<div class="card-body">
<div class="row">
<div class="col-md order-2 order-md-1 mt-4 mt-md-0">
<div class="collapse categories-show">
<div class="row">
<div class="col-md order-2 order-md-1 mt-4 mt-md-0">
<h5 class="card-title"><a href="#subCategories-show" class="subcategory_carat" data-toggle="collapse"><i class="fa fa-plus-circle"></i></a> Mammal Biodiversity</h5>
</div>
</div>
<div class="find-table">
<div class="row ml-4">
<div class="col">
<div class="collapse subCategories-show">
<h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Brook Trout"><i class="fa fa-plus-circle"></i></a> Brook Trout</h5>
</div>
</div>
</div>
<div class="row ml-4">
<div class="col">
<div class="collapse table-show">
<div class="table-responsive">
<table id="studyTableBrookTrout" class="table table-striped study-table" value="Brook Trout" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Study</th>
<th>Indicator Categories</th>
<th>Years</th>
<th>Org</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="find-table">
<div class="row ml-4">
<div class="col">
<div class="collapse subCategories-show">
<h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Moose Population"><i class="fa fa-plus-circle"></i></a> Moose Population</h5>
</div>
</div>
</div>
<div class="row ml-4">
<div class="col">
<div class="collapse table-show">
<div class="table-responsive">
<table id="studyTableMoosePopulation" class="table table-striped study-table" value="Moose Population" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Study</th>
<th>Indicator Categories</th>
<th>Years</th>
<th>Org</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="find-table">
<div class="row ml-4">
<div class="col">
<div class="collapse subCategories-show">
<h5><a href="#table-show" class="table_carat" data-toggle="collapse" value="Little Northern Squirrel"><i class="fa fa-plus-circle"></i></a> Little Northern Squirrel</h5>
</div>
</div>
</div>
<div class="row ml-4">
<div class="col">
<div class="collapse table-show">
<div class="table-responsive">
<table id="studyTableLittleNorthernSquirrel" class="table table-striped study-table" value="Little Northern Squirrel" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>Study</th>
<th>Indicator Categories</th>
<th>Years</th>
<th>Org</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我的 JS：
//show or collapse all
$('#expand-all').on('click', function(e) {
if (this.text==='Expand All') {
this.text="Collapse All";
$('.collapse').each(function(){
if (!$(this).hasClass( "show" )) {
$(this).addClass('show');
}
$('.category_carat').each(function(){
this.innerHTML='<i class="fa fa-caret-down"></i>';
});
$('.subcategory_carat').each(function(){
this.innerHTML='<i class="fa fa-minus-circle"></i>';
});
$('.table_carat').each(function(){
this.innerHTML='<i class="fa fa-minus-circle"></i>';
});
});
}
else {
this.text="Expand All";
$('.collapse').each(function(){
if ($(this).hasClass( "show" )) {
$(this).removeClass('show');
}
$('.category_carat').each(function(){
this.innerHTML='<i class="fa fa-caret-right"></i>';
});
$('.subcategory_carat').each(function(){
this.innerHTML='<i class="fa fa-plus-circle"></i>';
});
$('.table_carat').each(function(){
this.innerHTML='<i class="fa fa-plus-circle"></i>';
});
});
}
})
//show or collapse categories
$(".category_carat").click(function(){
$(this).closest(".card").find(".categories-show").slideToggle();
//console.log($(this).closest(".card").find(".show-cat"));
if (this.innerHTML==='<i class="fa fa-caret-down"></i>') {
this.innerHTML='<i class="fa fa-caret-right"></i>';
}
else {
this.innerHTML='<i class="fa fa-caret-down"></i>';
}
});
$(".subcategory_carat").click(function(){
$(this).closest(".card").find(".subCategories-show").slideToggle();
if (this.innerHTML==='<i class="fa fa-plus-circle"></i>') {
this.innerHTML='<i class="fa fa-minus-circle"></i>';
}
else {
this.innerHTML='<i class="fa fa-plus-circle"></i>';
}
});
$(".table_carat").click(function(){
$(this).closest(".find-table").find(".table-show").slideToggle();
if (this.innerHTML==='<i class="fa fa-plus-circle"></i>') {
this.innerHTML='<i class="fa fa-minus-circle"></i>';
}
else {
this.innerHTML='<i class="fa fa-plus-circle"></i>';
}
});
【问题讨论】：
标签： jquery twitter-bootstrap bootstrap-4