Tengo un conjunto de divisiones que deseo hacer plegables/expandibles usando el método slideToggle() de jQuery. ¿Cómo puedo hacer que todos estos divs se colapsen de forma predeterminada? Me gustaría evitar llamar explícitamente a slideToggle() en cada elemento durante/después de la representación de la página.Haciendo que los elementos slideToggle() se colapsen de forma predeterminada en jQuery
Usted tendrá que asignar un estilo: display: none a estas capas, de modo que no se muestran antes Javascript prestación. Luego puede llamar slideToggle() sin problemas. Ejemplo:
<style type="text/css">
.text{display:none}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('span.more').click(function() {
$('p:eq(0)').slideToggle();
$(this).hide();
});
});
</script>
<body>
<p class="text">
I am using jquery <br/>
I am using jquery <br/>
I am using jquery <br/>
I am using jquery <br/>
I am using jquery <br/>
I am using jquery <br/>
</p>
<span class="more">show</span>
es probable que pueda hacer algo como esto:
$(document).ready(function(){
$('div').hide();
});
El beneficio de esta versión es que, si jquery desaparece, se mostrarán ambos de manera predeterminada. – gaijintendo
Puede comenzar sus elementos con style = "display: none;" y slideToggle() lo tomará desde allí.
La aplicación de un estilo CSS detrás de las escenas, como se indicó anteriormente, causa complicaciones para los usuarios con scripts desactivados. Una forma de evitar esto es declarar que su elemento está oculto como dijo Anne, o definir su CSS en su script como una función a modificar, no como un estilo para la página (para mantener la estructura, el estilo y la función por separado) y luego usar el toggleClass función del script o las funciones de ocultación de efectos personalizados definidas por jQuery.
Esto podría causar problemas para las personas que tienen Javascript deshabilitado pero CSS habilitado. ¡No podrán ver tu contenido! – strager
Lo sé, pero la pregunta implicaba que Craig no quería usar javascript para mostrar/ocultar la acción, por lo que la única alternativa son las hojas de estilo. De todos modos, seguramente si está usando javascript de alguna manera, su código será totalmente inaccesible para los lectores de pantalla, etc ... Trabajo con este tipo de exigencias – netadictos
strager es correcto, pero en este caso particular no me importa tanto + CSS -JS (el sitio tendrá problemas más grandes que esta página en particular, si ese es el caso). –