Question

在页面加载之前有一瞬间显然没有应用jquery，并且页面看起来与你禁用javascript的情况完全一样。然后当页面完成加载时，jquery启动并且手风琴看起来很完美。

问题是，每次刷新页面或导航到页面时，它看起来都很难看，我不知道为什么会发生这种情况或如何修复它。

有没有人有任何想法？

Answer 1

任何不会在默认的手风琴视口中显示的元素都应该具有display none的CSS属性。

示例：

#sampleDiv{

    display:none;
}

这应该可以解决页面加载时闪烁的外观。

Answer 2

你的手风琴可能会在文件准备好的情况下运行，这是因为你的javascript需要等待你的元素加载才能对它们起作用。所以你的脚本不会被激活，直到页面上的每个元素都被加载，可能你的问题应该是为什么我的页面加载速度如此之快，我的图像是否大到我的脚本是否很大。

Answer 3

我做了什么，将display:none设置为拥有整个手风琴的div，如下所示：

<div id="accordion" style="display: none;">
        <h3 id="mark">
...

然后，在脚本标记中

jQuery(window).load(function(){
    var accc = document.getElementById('accordion');
    accc.style.display = "";    
});

对于半秒/全秒，而不是显示不完整的手风琴，我只看到一个空白页，然后是手风琴。

Answer 4

这不是一个答案，而是一些指导。使用几行基本jQuery可以轻松创建手风琴。制作自己的手风琴将为您提供更大的灵活性和更少的开销。正如您在我的示例中所看到的，.accBody div（包含次要内容）被初始化为隐藏，因此在手动展开之前它们永远不可见。

<强> CSS

.accHeader{
   padding:2px; 
   background:#000; 
   color:#fff; 
   margin:2px;   
}
.accBody{
 padding:2px;
 display:none;   
}

<强> HTML

<div class='accHeader'>Header</div>
<div class='accBody'>Body</div>

<div class='accHeader'>Header</div>
<div class='accBody'>Body</div>

<强>的jQuery

$('.accHeader').click(function(){
    $(this).next('.accBody').slideToggle('medium');
});