WordPress短代码中的手风琴面板未与自定义帖子合拢 [英] Accordion panel in wordpress shortcode is not collapsing with custom post

问题描述

手风琴面板未与自定义帖子类型的简码合拢。我无法在手风琴中添加折叠课。

Accordion panel not collapsing with shortcode in custom post type. I can not add 'collapse class' in the accordion. It may be the issue in this case.

  jQuery(document).ready(function($){


        $(".panel-group .panel:first-child .panel-heading").addClass("active");
        $(".panel-group .panel:first-child .panel-collapse").addClass("in");
    });

这是我在主题主题的functions.php中具有的功能：

This is the function I have in functions.php of my theme:

function acordian_shortcode( $atts ) {

    extract(shortcode_atts(array(

        'count' => '3',
        'id' => '1',

    ), $atts ) );

    $query = new WP_Query( array(
        'post_type' => 'accordian',
        'posts_per_page' => $count,

    ) );



       $list = '<div class="panel-group" id="accordion'.$id.'">';
 while ( $query->have_posts() ) : $query->the_post();


    $id = get_the_ID();
    $promo_icon = get_post_meta($id, 'promo_icon', true);

    $list .= '
       <div class="panel panel-default">
                            <div class="panel-heading">
                              <h3 class="panel-title">
                                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion'.$id.'" href="#collapse'.get_the_ID().'">
                                 '.get_the_title().'
                                  <i class="fa fa-angle-right pull-right"></i>
                                </a>
                              </h3>
                            </div>

                         <div id="collapse'.get_the_ID().'" class="panel-collapse collapse">
                         <div class="panel-body">
                           '.get_the_content().'
                       </div>
                 </div>
            </div> '; 
    endwhile;
    $list .= '</div>';
    wp_reset_postdata(); 
    return $list;
    }

add_shortcode( 'accordian', 'acordian_shortcode' );

推荐答案

查找代码结构我假设您要创建

Looking your code structure I assume that you want to create a Bootstrap accordion.

我在您的一个站点中运行了您的代码，然后将返回的HTML复制到了CodePen

I ran your code in one of my sites, then copyed returned HTML to CodePen

<div class="panel-group" id="accordion1">...</div>

CodePen ，一切都可以正常进行。 HTML是通过php函数正确构建的。

CodePen, and everithing works as it should. HTML is constructed properly from your php function.

因此，我认为，您应该检查是否正确包含了jQuery和bootstrap .js文件。

So, I think, you just should check if your jQuery and bootstrap .js files are included properly.

这篇关于WordPress短代码中的手风琴面板未与自定义帖子合拢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！