Ocultar jQuery Accordion durante la carga

Question

Estoy probando la creación de un sitio con una conexión lenta y noté que el jQuery Accordion se mantiene expandido durante mucho tiempo, hasta que el resto del sitio se carga, y finalmente se colapsa. No muy lindo Me preguntaba cómo podría mantenerlo colapsado a través del proceso de carga y solo expandir cuando hago clic.

Estoy trabajando con la versión independiente 1.6 del complemento 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 oculto.

Tal vez el problema está en el CSS tengo una imagen de fondo en cada uno de los sub menú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 con el acordeón siempre colapsado

-edit - Olvidé mencionar que también estoy esperando una solución que permita que la navegación siga siendo accesible para aquellos que no tengan Javascript.

Answer 1

hago esto 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 de inmediato.

Existen soluciones buenas 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 Javascript recta:

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

Answer 2

No he usado el acordeón UI, pero he construido acordeones con jQuery. Lo único que hace el script es alternar la visibilidad de los paneles de acordeón. Así que si un panel es visible cuando se carga la página, entonces tal vez debería intentar usar una regla CSS, tales como:

ul.sub{ 
    visiblity:hidden; 
    display:none; 
} 

Answer 3

Me trataron de ocultar los elementos de la CSS para evitar que aparezcan mientras carga pero todo lo logrado está en teniendo siempre ocultos.

Por qué no pruebas a lo que es escondido en el css, y luego hacer esto:..

jQuery ('# navegación') show() acordeón ...

Answer 4

Código interior jQuery.ready() no se ejecuta hasta que el DOM esté listo, por lo que es normal que los elementos que finalmente estarán ocultos permanezcan visibles por un tiempo. Accordion está configurado de esta manera, en parte por su facilidad de uso y, en parte, por la gracia de la gradación: el contenido no se perderá (oculto) si JavaScript está desactivado.

Si está dispuesto a arriesgar una página que se rompe sin JavaScript, continúe y configure sus elementos para que se oculten. Luego, inmediatamente antes de .accordion(), show() them.

---

He aquí una idea para mantener la compatibilidad. Ha sido mínimamente probado y está abierto a comentarios.

Deja tu CSS solo, sino añadir esto a la parte superior de JavaScript (fuerajQuery.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 esconde tus elementos ocultosLuego, dentro de jQuery.ready(), llame al $(".yourclass").show() para recuperarlos antes de inicializar el acordeón.

Answer 5

Haga su enlace .accordion directamente en un script <> justo debajo de los elementos del acordeón en lugar de esperar que el documento esté listo.

Se activarán tan pronto como sea posible, en lugar de esperar hasta que la página esté 'lista' (lo que puede llevar mucho tiempo especialmente en IE, que no admite el evento DOMContentLoaded, por lo que jQuery tiene que esperar onload, que solo se activa después de todas las imágenes y todo está cargado).

podría establecer el elemento principal del acordeón en 'visibility: hidden', y luego restaurarlo a 'visible' manualmente cuando se inicia el script. Pero los navegadores con JavaScript desactivado no verán el contenido en absoluto, lo que no es ideal.

Answer 6

que enfrentó este mismo problema hace una semana . Puedo configurar el contenedor de display: none y luego se usa jQuery para hacer que se muestre en el momento apropiado:

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

Answer 7

Tengo cientos de elementos de jQuery (pestañas, deslizadores & acordeones) a través de muchos sitios del portal. Establecer estilos de ocultar/mostrar para cada uno no es una opción realista.

Solución simple, esconda el cuerpo hasta que jQuery esté listo y haya construido los elementos, luego muéstrele el cuerpo.

En mi maestra de estilo:

body { 
    display: none; 
} 

En mi maestra archivo javascript, en la parte inferior de jQuery.ready():

$(document).ready(function() { 
    $("body").show(); 
} 

Answer 8

He estado usando soluciones css como el que sugirió Tim , pero esto significaría ocultar contenido para personas con deshabilitación de JavaScript (o dispositivos sin soporte de JavaScript). Yo prefiero la solución proporcionada por Jerph, gracias por compartir.

Answer 9

tener cuidado de usar esto con respecto a la accesibilidad:

body { 
    display: none; 
} 

Si por cualquier razón JavaScript desactivado, entonces no se mostrará nada;)

Answer 10

No he utilizado acordeón interfaz de usuario, pero han construido acordeones con jQuery. Lo único que hace el script es alternar la visibilidad de los paneles de acordeón. Entonces, si un panel está visible cuando se carga la página, entonces quizás deba intentar usar una regla CSS como:

ul.sub{ 
    visiblity:hidden; 
    display:none; 
}