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站点的一部分，并且我已将引导代码包含在模板的顶部。在重建整个站点的过程中，我在站点的头文件中添加了一个新的bootstrap include。当我开始处理这个特定的页面时，我将旧的include包含在我的模板顶部，而这种代码冗余在某种程度上导致崩溃功能不正确。我仍然不知道/理解为什么会这样，但我现在已经正常工作了。

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

自举面板没有崩溃

1 个答案: