页面加载时，具有类折叠的 Bootstrap 4 div 已打开

Question

我有一系列嵌套的可折叠项目，由于某种原因，最里面的项目在页面加载时打开。之后它会正确切换，但我不知道为什么它没有开始关闭。这是一个有问题的代码笔（“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>';
            }
          });        

Answer 1

我想通了！有一个额外的

$(this).closest(".card").find(".table-show").slideToggle();

在$(".subcategory_carat").click(function(){

里面