css - 加载时隐藏 jQuery Accordion

Question

我正在测试一个连接速度较慢的站点构建，我注意到 jQuery Accordion 保持扩展很长时间，直到站点的其余部分加载完毕，然后才最终崩溃。不是很漂亮。我想知道如何在加载过程中保持它折叠并仅在单击时展开。

我正在使用 Accordion 插件的独立 1.6 版本。

基本结构:

<div class="sidebar">
    <ul id="navigation" class="ui-accordion-container">
        <li><a class="head" href="#">1</a>
            <ul class="sub">
                <li><a href="#">1a</a></li>
                <li><a href="#">2a</a></li>
            </ul> 
         </li>
    </ul>
</div>

和脚本

jQuery().ready(function(){
    jQuery('#navigation').accordion({ 
        active: 'false', 
        header: '.head', 
        navigation: true,
        animated: 'easeslide',
        collapsible: true
    });     
});

我试图隐藏 CSS 中的元素以防止它们在加载时出现，但所取得的只是让它们始终隐藏。

也许问题出在 CSS 我在每个子菜单中都有一个背景图片:

#navigation{
    margin:0px;
    margin-left: 10px;
    padding:0px;
    text-indent:0px;
    font-size: 1.1em;
    width:200px;
    text-transform: uppercase;
    padding-bottom: 30px;
} 
#navigation ul{
    border-width:0px;
    margin:0px;
    padding:0px;
    text-indent:0px;
}
#navigation li{
    list-style:none outside none;
}
#navigation li ul{
    height:185px; overflow:auto;
}
#navigation li ul.sub{
    background:url('../images/sub.jpg') no-repeat;
    dispaly: block;
}
#navigation li li a{
    color:#000000;
    display:block;
    text-indent:20px;
    text-decoration: none;
    padding: 6px 0;
}
#navigation li li a:hover{
    background-color:#FFFF99;
    color:#FF0000;
}

提前感谢您提供任何有关如何让这个东西运行得更顺畅并且 Accordion 总是折叠起来的建议。

-edit - 我忘了说我也希望有一个解决方案，让那些没有 Javascript 的人仍然可以访问导航。

Answer 1

我对我所有的网站做的第一件事是:在 body 标签之后，用这个 javascript 放置一个脚本标签:

jQuery('body').addClass('js');

这为您提供了一个样式钩子(Hook)，用于任何元素，这些元素在启用 Javascript 时会以某种方式看起来有所不同，并且会立即发生。

在其他答案中，您的其余问题都有很好的解决方案。您只需要两个“基本”样式而不是一个:

#navigation ul li { /*open styles for no javascript*/ }
body.js #navigation ul li { /*closed styles for pre dom.ready*/ }

...然后在将 Accordion 应用到 dom.ready 之前重新打开。

编辑:如果您在页面末尾加载 jQuery(或者不使用 jQuery)，您可以使用这个直接的 javascript 版本:

<script type="text/javascript">
    var b = document.getElementsByTagName('body')[0];
    b.className+=b.className?' js':'js';
</script>