加载时隐藏 jQuery Accordion

我正在测试一个连接速度较慢的网站构建，我注意到 jQuery 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;
}

预先感谢您提供有关如何让这件事运行得更顺畅以及让手风琴总是折叠的建议。

-编辑 - 我忘了提及，我也希望有一个解决方案，让那些没有 JavaScript 的人仍然可以访问导航。

我对我的所有网站执行的第一件事是：在 body 标记之后，放置一个带有以下 javascript 的脚本标记：

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

这为您提供了任何元素的样式钩子，当启用 Javascript 时，这些元素看起来会以某种方式有所不同，并且它会立即发生。

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

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

...然后在 dom.ready 上应用手风琴之前重新打开。

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

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