Esconder jQuery acordeão carregamento enquanto

StackOverflow https://stackoverflow.com/questions/703783

  •  22-08-2019
  •  | 
  •  

Pergunta

Eu estou testando uma compilação local com uma conexão lenta e notei as estadias jQuery Acordeão expandidos por um longo tempo, até que o resto do site é carregado, e finalmente entra em colapso. Não é muito bonita. Eu queria saber como eu poderia mantê-lo em colapso durante o processo de carregamento e apenas expandir quando clicado.

Eu estou trabalhando com a versão standalone 1.6 do plugin acordeão.

A estrutura básica: 

<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>

eo script 

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

Eu tentei esconder os elementos da CSS para mantê-los de aparecer durante o carregamento, mas tudo o que consegue é em tê-los sempre escondido.

Talvez o problema está no CSS Eu tenho uma imagem de fundo em cada um dos 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;
}

Agradecemos antecipadamente por qualquer conselho sobre a forma de ter essa coisa correr um pouco mais suave e tendo o acordeão sempre entrou em colapso.

-edit - Eu esqueci de mencionar que eu também estou esperando por uma solução que permitirá que o nav ainda estar acessível para aqueles sem Javascript.

Foi útil?

Solução

Eu faço isso primeira coisa com todos os meus sites: Logo após a tag body, coloque uma marca de script com este javascript: 

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

Isto dá-lhe um gancho de estilo para quaisquer elementos que vão olhar diferente, de alguma forma, quando Javascript habilitado, e isso acontece imediatamente.

Há boas soluções para o resto de seus problemas nas outras respostas. Você só vai precisar de dois "base" estilos em vez de um: 

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

... e então re-aberto antes de aplicar o acordeão no dom.ready.

EDIT: Se você estiver carregando jQuery no final da página (ou não estiver usando jQuery), você pode usar esta versão javascript reta: 

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

Outras dicas

Eu enfrentei esse mesmo problema há uma semana. Eu defini o recipiente para display: none e então usado jQuery para torná-lo aparecer no momento apropriado: 

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

Código dentro jQuery.ready () não é executado até que o DOM está pronto - por isso é normal para os elementos que venham a ser escondidos para ficar visível por um tempo. Acordeão é configurado dessa forma, em parte, para facilidade de uso e em parte por causa da degradação graciosa:. Conteúdo não será falta (oculto) se o JavaScript está desativado

Se você está disposto a arriscar uma página que breaks sem JavaScript, vá em frente e definir os seus elementos para ser escondida. Então, imediatamente antes .accordion (), show ()-los.

Aqui está uma idéia para manter a compatibilidade. Ele foi minimamente testado e está aberto a comentários.

Deixe o seu CSS sozinho, mas adicioná-lo ao topo de sua JavaScript ( fora jQuery.ready()): 

document.styleSheets[0].addRule(".yourclass", "display:none");

Dessa forma, como a página está sendo construída, uma regra CSS será configurado para esconder seus elementos ocultos. Então, jQuery.ready() dentro, $(".yourclass").show() chamada para trazê-los de volta antes de inicializar o acordeão.

Faça o seu .accordion ligação direta em um

scroll top