引导板不塌陷

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>

第2次修改：我觉得问题是.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网站的一部分中构建此页面的，并且我在模板顶部包含了引导代码。 在重建整个网站的过程中，我在网站的头文件中添加了一个新的引导程序包含。 当我着手处理此特定页面时，我将旧的include保留在模板的顶部，并且这种冗余的代码以某种方式导致崩溃无法正常工作。 我仍然不知道/不明白为什么会这样，但是现在我已经正确地工作了。

我意识到我实际上没有得到任何回应，但是感谢所有至少看过的人。