Ocultar jQuery acordeón durante la carga

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

  •  22-08-2019
  •  | 
  •  

Pregunta

Estoy probando un sitio construido con una conexión lenta y me di cuenta de la jQuery acordeón mantiene expandió durante mucho tiempo, hasta que se cargue el resto del sitio, y, finalmente, se derrumba. No es muy bonita. Me preguntaba cómo podía mantener su colapso a través del proceso de carga y sólo se expande cuando se hace clic.

Estoy trabajando con la versión independiente 1.6 del plugin de acordeón.

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

y el guión 

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

Traté de ocultar los elementos de la CSS para evitar que aparezcan durante la carga pero lo único que logra es en disponer de ellos siempre ocultos.

Tal vez el problema está en el CSS tengo una imagen de fondo en cada uno de los submenús: 

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

Gracias de antemano por cualquier consejo sobre cómo tener esta cosa correr un poco más suave y habiendo el acordeón siempre se derrumbó.

-edit - Se me olvidó mencionar que también estoy esperando una solución que permita que el NAV para seguir siendo accesible para los que no tienen Javascript.

¿Fue útil?

Solución

Lo hago primero que con todos mis sitios: Justo después de la etiqueta del cuerpo, poner una etiqueta de secuencia de comandos con este javascript: 

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

Esto le da un gancho de estilo para cualquier elemento que se verá diferente de alguna manera cuando Javascript habilitado, y sucede inmediatamente.

Hay buenas soluciones para el resto de sus problemas en las otras respuestas. Usted sólo necesita dos estilos "base" en lugar de uno: 

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

... y luego volver a abrir antes de aplicar el acordeón en dom.ready.

EDIT: Si va a cargar jQuery al final de la página (o no está usando jQuery), puede utilizar esta versión recta javascript: 

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

Otros consejos

Me enfrenté a este mismo problema hace una semana. Me puse el contenedor para mostrar: ninguno y luego se usa jQuery para hacer que se muestre en el momento adecuado: 

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

Código dentro jQuery.ready () no se ejecuta hasta que el DOM está listo - por lo que es normal que los elementos que con el tiempo se pueden ocultar para permanecer visible durante un tiempo. Acordeón está configurado de este modo en parte por la facilidad de uso y en parte por el bien de la degradación grácil:. Contenido no se perderá (oculto) si javascript está deshabilitado

Si usted está dispuesto a correr el riesgo de una página que rompe sin JavaScript, adelante y establecer sus elementos a ocultar. Entonces, inmediatamente antes de .accordion (), show () ellos.

He aquí una idea para mantener la compatibilidad. Se ha mínimamente probado y está abierto a comentar.

Deja tu CSS solo, sino añadir esto a la parte superior de JavaScript ( fuera jQuery.ready()): 

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

De esa manera, ya que la página está en construcción, una regla CSS se creó para ocultar los elementos ocultos. Luego, en el interior jQuery.ready(), llame $(".yourclass").show() para traerlos de vuelta antes de iniciar el acordeón.

Haga su .accordion uniéndose directamente en un

scroll top