bootstrap面板不折疊

Question

我有一個自舉手風琴面板，面板不會像我們點擊它們時那樣摺疊，如果它們已經打開。我無法弄清楚爲什麼。我曾與硬編碼的面板工作，但一旦我設置wp_query來加載面板，除了面板關閉，一切工作。

功能：

<script> 
$(function() { 
    $('#accordion').on('shown.bs.collapse', function (e) { 
     var offset = $(this).find('.collapse.in').prev('.panel-heading'); 
     if(offset) { 
      $('html,body').animate({ 
       scrollTop: $(offset).offset().top -50 
      }, 500); 
     } 
    }); 
}); 

$('.collapse').on('shown.bs.collapse', function(){ 
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus"); 
}).on('hidden.bs.collapse', function(){ 
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus"); 
}); 

</script> 

和嵌套循環生成手風琴面板：

<div class="home-contents"> 
    <div class="container"> 
     <div class="row"> 
     <?php while (have_posts()) : the_post(); ?> 
      <h1 class="faqheading"><?php the_title(); ?></h1> 
      <!-- <div class="col-sm-9" style="float: none; margin: auto;"><?php the_content(); ?></div> --> 
     <?php endwhile; ?> 
      <div class="clear"></div> 
     </div> <!-- row --> 
    </div> <!-- container --> 

    <div class="blog-page"> 
      <div class="container"> 
      <div class="row"> 
       <div class="col-sm-12 "> 
       <div class="container"> 
        <div class="panel-group" id="accordion"> 

        <?php 
        /* 
        * Loop through Categories and Display Posts within 
        */ 
        $post_type = 'faq'; 
        // Get all the taxonomies for this post type 
        $taxonomies = get_object_taxonomies(array('post_type' => $post_type)); /* gets taxonomy from posts */ 
        foreach($taxonomies as $taxonomy) : 
         // Gets every "category" (term) in this taxonomy to get the respective posts 
         $terms = get_terms($taxonomy); 
         foreach($terms as $term) : ?> 

         <div class="groupheading col-sm-3"><h5 style=" color: #3fa9f5; font-size: 24px; font-weight: 300;"><?php echo $term->name; ?></h5></div> 

          <?php 
          $args = array(
           'post_type' => $post_type, 
           'posts_per_page' => -1, //show all posts 

           'tax_query' => array(
           array(
            'taxonomy' => $taxonomy, 
            'field' => 'slug', 
            'terms' => $term->slug, 
            'orderby' => 'collapse id', 
            'order' => 'desc' 
           ) 
          ), 
           'order' => 'DESC' 
          ); 
          ?> 

         <?php   
         $posts = new WP_Query($args); 
         if($posts->have_posts()): while($posts->have_posts()) : $posts->the_post(); ?> 

          <div class="panel panel-default col-sm-9"> 
          <div class="panel-heading"> 
           <h4 class="panel-title"> 
           <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#<?php echo 'collapse'.get_the_id();?>"><?php $value = get_field("faq_heading"); echo $value; ?></a> 
           </h4> 
          </div> 
          <div id="<?php echo 'collapse'.get_the_id();?>" class="panel-collapse collapse"> 
           <div class="panel-body col-sm-9"> 
           <p><?php $value = get_field("faq_text", false, false); echo $value; ?></p> 
           </div> 
          </div> 
          </div> <!-- .panel --> 
         <?php endwhile;?> 

        <div class="panel panel-default col-sm-9 mobilehide" style="height: 45px;"></div> 
        <div class="groupheading col-sm-3 mobilehide" style="height: 45px;"></div> 

         <?php 
         endif; ?> 

         <?php endforeach; 
        endforeach; ?> 
        </div> <!-- .panel-group --> 
        </div><!-- end col-sm-12 --> 
       </div> <!-- end row --> 
       </div><!-- end container --> 
      </div><!-- end blog-page --> 
      </div> <!-- .container --> 

編輯：好吧，我添加了以下，但它仍然沒有工作：

<script> 
$(document).ready(function(){ 
    $("a.cf").click(function(){ 
     $(this).parentsUntil(".panel-default").find(.children(".panel-collapse")).removeClass("in"); 
    });f 
}); 
</script> 

第二編輯：我覺得問題是.parent沒有找到正確的元素，但我不知道如何正確引導它。

<script> 
$(document).ready(function(){ 
    $("a.cf").click(function(){ 
     $(this).addClass("collapsed"); 
     $(this).parent().find(".panel-collapse .collapse").removeClass(".panel-collapse .collapse").addClass(".panel-collapse .collapse .in"); 
     $(this).find().parent('.collapse.in').removeClass(".panel-collapse.collapse").addClass(".panel-collapse.collapse.in");; 
    }); 
}); 
</script> 

Answer 1

好吧，我解決了這個問題。我原本是將此頁面構建爲wordpress網站的一部分，並且我在模板的頂部添加了引導程序代碼。在重建整個站點的過程中，我在站點的頭文件中放置了一個新的引導包含文件。當我開始在這個特定的頁面上工作時，我把舊的包含放在了我的模板的頂部，而這種冗餘代碼在某種程度上導致了崩潰的功能不正確。我仍然不知道/明白爲什麼會出現這種情況，但我現在已經正確地工作了。

我意識到我其實沒有對此做出任何迴應，但是感謝所有至少看過的人。