jQuery 手风琴 Flash 仅在 Chrome 中加载内容

Question

我有一个带手风琴的page/template，一旦加载到GoogleChrome，一开始闪现里面的内容很快，然后一旦[=29]就消失了=] 实际加载，这会将页面恢复到它应该看起来的样子。 Firefox 不会出现这个问题，只有 Chrome.

我尝试添加 "jQueryElement.hide()" 但它只是完全隐藏了内容..

这是 (stack-list-template.php) :

<?php
    $stackQuery = new WP_Query( array(
                        'post_type' => 'abc_stack',
                        'meta_key' => 'abc_stack_key') );

    if ( $stackQuery->have_posts() ) {
        ?><div class="accordion-header">
            <h2><i class="blue-arrow fa-long-arrow-right fa fa-2"></i> Stacks</h2>
        </div>
        <div class="stack-list-container">
        <?php
        while ( $stackQuery->have_posts() ) {
            $stackQuery->the_post();?>


                    <?php get_template_part( 'content', 'stack-list-template' ); ?>


        <?php } // end while
        echo "</div>";
    }
    wp_reset_postdata();
?> 

<script>
    jQuery(document).ready(function(){
        jQuery('.accordion-header').click(function() {
            jQuery(this).next().toggle('slow');
            jQuery("i",this).toggleClass("fa-long-arrow-right fa-long-arrow-down");
            return false;
        }).next('.stack-list-container').hide();
    });
</script>

我在这里阅读：http://www.learningjquery.com/examples/style-noflash.html

并尝试实施 "hide" 技术，但它只隐藏了我的内容。

使上述资源与我的代码一起工作的正确方法是什么？编写该脚本的正确方法是什么，以便手风琴中的内容不会在页面加载时闪烁？

Answer 1

应该在页面加载时隐藏的内容应该使用 CSS 隐藏（或者，如果需要，内联样式），因为您永远无法确定 javascript 需要多长时间才能完成加载或执行。

所以要么这样做：

<div class="stack-list-container" style="display:none">

或者，最好在 <head> 元素中加载的 CSS 中执行以下操作：

.stack-list-container{ display:none; }

您也可以删除此行，因为它现在是多余的：

.next('.stack-list-container').hide();

jQuery 手风琴 Flash 仅在 Chrome 中加载内容

jQuery accordion flash loads content only in Chrome

jquery

dom

accordion

jquery-ui-accordion