jQuery用户界面手风琴只适用于第一篇文章: WordPress自定义文章类型

Question

手风琴只适用于第一个岗位..。

我知道有类似的问题已经张贴，在阅读了所有这些问题后，我似乎不明白为什么我的不工作。

我在functions.php中将脚本排队，如下所示：

function my_scripts_method() {
    if ( !is_admin() ) {
        wp_enqueue_script('jquery-ui-accordion');
        wp_enqueue_script(
            'custom-accordion',
        get_template_directory_uri() . '/js/accordion.js',
        array('jquery')
    );
    }
}
add_action('wp_enqueue_scripts', 'my_scripts_method');

.js文件如下所示：

jQuery(document).ready(function($) {
    $( "#accordion" ).accordion({
        collapsible: true, 
                active: false
    });
});

自定义post类型循环如下所示：

<?php while ( have_posts() ) : the_post(); ?>

<div id="accordion"> 

    <h3><?php the_title(); ?></h3> 

    <div>
    <?php the_content(); ?>
    </div>

</div> <!--#accordion-->

<?php endwhile; ?>

手风琴只适用于第一篇文章。

知道为什么吗？

premierdev1 (点) hcg (点) bz/prm_faq/

Answer 1

简单的修正：

把手风琴放在外圈外面。很有魅力！

<div id="accordion"> 

        <?php while ( have_posts() ) : the_post(); ?>

                <h3><a href="#"><?php the_title(); ?></a></h3> 

                <div>
                    <p><?php the_content(); ?></p>
                </div>

        <?php endwhile; ?>

</div> <!--#accordion-->

Answer 2

在Firefox中使用Firebug这样的工具会使您受益。

通过查看启用了Firebug的站点，查看Console选项卡，我可以看到故障的原因是错误：

TypeError: $ is not a function

var icons = $( ".selector" ).accordion( "option", "icons" );

该代码在您的脚本文件中：

http://premierdev1.hcg.bz/wp-content/themes/premier-reverse/js/accordion.js?ver=3.8.1

问题是您不能在$中为jQuery使用WordPress函数，您必须使用jQuery -除非您是在像这样构造的文档就绪函数中：

jQuery(function($) {
    // Do stuff in here, can use $ if you like
});

因此，为了纠正这一点，我建议将该文件更改为如下所示：

jQuery(document).ready(function($) {
    $( "#accordion" ).accordion({
        collapsible: true,
        active: false
    });
    /* Move the below lines into your document ready */
    // getter
    var icons = $( ".selector" ).accordion( "option", "icons" );
    // setter
    $( ".selector" ).accordion( "option", "icons", { "header": "ui-icon-plus", "activeHeader": "ui-icon-minus" } ); 

});