我制作了一个可在初始页面加载时使用的全部展开/全部折叠按钮。但是，如果我“手动”展开其中一个 div，那么它会保持打开状态，并且不会响应“全部折叠”按钮。
重现问题：
我在这里制作了一个带有问题的代码笔：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>';
}
});
答案 0 :(得分：0)
在您的代码中，您使用 slideToggle() 这会将 css display:none 或 display:block 添加到您的元素，因此即使您使用 removeClass("show")，该样式仍然存在于您的元素中.因此，每当您点击 .hide() 链接时，您都可以使用 .show() 或 collapse all。
演示代码：
//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() {
//show all tables...
$(this).closest(".find-table").find(".table-show").show()
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() {
//hide all tables...
$(this).closest(".find-table").find(".table-show").hide()
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>';
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js">
</script>
<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>