Question

我有一个带有手风琴的页面/模板，一旦加载到谷歌浏览器中，首先会快速闪现内部内容，然后一旦DOM / javascript实际加载就会消失，这会将页面恢复到它的状态＆＃39应该看。这个问题在Firefox中不会发生，只有Chrome。

我尝试添加＆＃34; jQueryElement.hide（）＆＃34;但它所做的只是完全隐藏内容..

这里（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

并尝试实施＆＃34;隐藏＆＃34;技术，但它只隐藏我的内容。

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

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 accordion flash仅在Chrome中加载内容

1 个答案: