在加载时隐藏jQuery手风琴 [英] Hide jQuery Accordion while loading

问题描述

我正在测试一个网站构建与缓慢的连接，我注意到jQuery手风琴保持扩展了很长时间，直到网站的其余部分加载，然后终于崩溃。不是很漂亮。

I am testing a site build with a slow connection and I noticed the jQuery Accordion stays expanded for a long time, until the rest of the site is loaded, and then finally collapses. Not very pretty. I was wondering how I could keep it collapsed through the loading process and only expand when clicked.

我正在使用独立的1.6版手风琴插件。

I am working with the standalone 1.6 version of the accordion plugin.

基本结构：

<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中的元素，以防止它们在加载时出现，但所有实现的是让他们总是隐藏。

I tried to hide the elements in the CSS to keep them from appearing while loading but all that achieved is in having them always hidden.

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

Maybe the problem is in the CSS I have a background image in each of the sub menus:

#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;
}

感谢您提供任何建议，并且手风琴总是崩溃。

Thanks in advance for any advice on how to have this thing run a little smoother and having the accordion always collapsed.

-edit - 我忘了提及，我也希望一个解决方案，将允许导航仍然可以访问没有Javascript的人。

-edit - I forgot to mention that I am also hoping for a solution that will allow the nav to still be accessible for those without Javascript.

推荐答案

我对所有的网站做这个第一件事：紧跟在body标签之后，放置一个脚本标签与这个javascript： / p>

I do this first thing with all my sites: Right after the body tag, put a script tag with this javascript:

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

这为你提供了一个样式钩子，当Javascript启用时，它会立即发生。

This gives you a style hook for any elements that will look different in some way when Javascript enabled, and it happens immediately.

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

There are good solutions to the rest of your problems in the other answers. You'll just need two "base" styles instead of one:

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

b $ b

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

... and then re-open before applying the accordion on dom.ready.

编辑：如果您在结束时加载jQuery页面（或不使用jQuery），您可以使用此直接的JavaScript版本：

If you're loading jQuery at the end of the page (or aren't using jQuery), you can use this straight javascript version:

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

这篇关于在加载时隐藏jQuery手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！