jQuery手风琴闪存内容仅在Chrome中
jQuery手风琴闪存内容仅在Chrome中
提问于 2016-03-01 20:03:43
我有一个页面/模板，它有一个手风琴，一旦加载到Google Chrome中，一开始会很快地将内容显示在里面，然后在DOM/javascript实际加载后消失，这会使页面恢复到它应该看起来的样子。这个问题并不发生在Firefox中，只有Chrome。
我试图添加一个"jQueryElement.hide()“，但它所做的只是完全隐藏了内容。
下面是(堆栈列表-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
并试图实现“隐藏”技术，但它只隐藏了我的内容。
用我的代码使上面的资源工作的正确方法是什么？怎样才能正确地编写我的脚本，这样手风琴里面的内容就不会在页面加载时闪现？
回答 1
Stack Overflow用户
回答已采纳
发布于 2016-03-01 20:07:47
应该隐藏在页面加载上的内容应该使用CSS (或者，如果必要的话，内联样式)隐藏，因为您永远无法确定加载或执行javascript需要多长时间。
所以要么这样做：
<div class="stack-list-container" style="display:none">或者，最好在加载<head>元素的CSS中这样做：
.stack-list-container{ display:none; }您还可以删除这一行，因为它现在是多余的：
.next('.stack-list-container').hide();页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35732383
复制相关文章
相似问题
腾讯云开发者
