Bootstrap 4展开全部/全部折叠按钮在折叠元素已经显示时不起作用
Posted
技术标签:
【中文标题】Bootstrap 4展开全部/全部折叠按钮在折叠元素已经显示时不起作用【英文标题】：Bootstrap 4 Expand All / Collapse All button doesn't work when collapse element already showing 【发布时间】：2021-05-01 15:51:40 【问题描述】：我制作了一个在初始页面加载时工作的全部展开/全部折叠按钮。但是，如果我“手动”展开其中一个 div，那么它会保持打开状态并且不会响应“全部折叠”按钮。
重现问题：
-
点击野生动物->哺乳动物生物多样性->溪鳟查看溪鳟表
点击链接展开全部查看所有表格
单击全部折叠，*** 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="*** Trout"><i class="fa fa-plus-circle"></i></a> *** Trout</h5>
</div>
</div>
</div>
<div class="row ml-4">
<div class="col">
<div class="collapse table-show">
<div class="table-responsive">
<table id="studyTable***Trout" class="table table-striped study-table" value="*** 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>';
);
【问题讨论】：
【参考方案1】：在您使用slideToggle() 的代码中，这会将css display:none 或display:block 添加到您的元素中，因此即使您使用removeClass("show")，该样式仍然存在于您的元素中。因此，无论何时点击您的collapse all 链接，您都可以使用.hide() 或.show()。
演示代码：
//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="*** Trout"><i class="fa fa-plus-circle"></i></a> *** Trout</h5>
</div>
</div>
</div>
<div class="row ml-4">
<div class="col">
<div class="collapse table-show">
<div class="table-responsive">
<table id="studyTable***Trout" class="table table-striped study-table" value="*** 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>【讨论】：
以上是关于Bootstrap 4展开全部/全部折叠按钮在折叠元素已经显示时不起作用的主要内容，如果未能解决你的问题，请参考以下文章