加载时隐藏jQuery Accordion

Question

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

提前感谢任何关于如何使这个东西运行得更顺畅并且手风琴总是崩溃的建议.

-edit - 我忘了提到我也希望有一个解决方案,允许那些没有Javascript的人仍可以访问导航.

Answer 1

我首先对所有网站做这件事:在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>

Answer 2

一周前我遇到了这个问题.我将容器设置为display:none,然后使用jQuery使其在适当的时间显示:

$(".accordion").show();
$(".accordion").accordion();