如何解决页面加载时,带有类折叠的 Bootstrap 4 div 处于打开状态
我有一系列嵌套的可折叠项目,出于某种原因,最里面的项目在页面加载时打开。之后它会正确切换,但我不明白为什么它没有开始关闭。这是一个有问题的代码笔(“brook trout”表正在显示并且应该被隐藏):https://codepen.io/xanabobana/pen/pobRxpx
HTML 代码:
<div class="container-fluid">
<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="row ml-4">
<div class="col">
<div class="collapse subCategories-show"><h5><a href="#table-show" class="table_carat" data-toggle="collapse"><i class="fa fa-plus-circle"></i></a> brook Trout</h5>
</div>
<div class="collapse table-show">
<div class="table-responsive">
<table id="studyTable" class="table table-striped" style="width:100%">
<thead>
<tr>
<th width="55">Show on Map</th>
<th>ID</th>
<th>Study</th>
<th>Indicator Categories</th>
<th>Years</th>
<th>Org</th>
<th>Protocols</th>
<th>Datasets</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
js:
$(".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(".table-show").slidetoggle();
$(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(".card").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>';
}
});
解决方法
我想通了!还有一个额外的
$(this).closest(".card").find(".table-show").slideToggle();
在 $(".subcategory_carat").click(function(){
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。