Me gustaría crear mi propio componente de acordeón sin usar ningún kit de herramientas AJAX, principalmente con fines de aprendizaje. No estoy seguro de por dónde empezar con este. Supongo que comenzaría creando div's para cada sección del acordeón. Quizás cada div contendría un encabezado, que sería el botón real seleccionado para mover el acordeón a esa sección. Sin embargo, no estoy seguro del enfoque correcto que se debe tomar una vez que se selecciona un botón de sección de acordeón. ¿Usaría el orden z para que cada sección sea de un orden z más alto? Cualquier ayuda es apreciada.

Gracias

1
Steve 22 jul. 2009 a las 14:55

3 respuestas

La mejor respuesta

Recomiendo encarecidamente elegir un libro como Técnicas Pro JavaScript de John Resig. le dará algunas ideas y reflexiones iniciales sobre cómo enfocar la construcción de sus propias soluciones del lado del cliente.

Esencialmente, tendría un elemento para actuar como encabezado, por ejemplo <h1> o <div> bajo el cual tendría un <div> con un estilo inicial de display: none;. Configure un controlador de eventos en el evento de clic del encabezado para cambiar el estilo de la división a continuación a display: block y asegurarse de que cualquier otro contenido <div> s esté oculto (haga esto usando una clase CSS en cada contenido <div> por ejemplo).

Te dejaré la animación suave como un ejercicio de cómo se podría lograr. Como sugerencia, recomendaría ver cómo una biblioteca de JavaScript como jQuery maneja la animación, revisando la fuente.

1
Russ Cam 22 jul. 2009 a las 11:05

La mejor manera de ordenarlo sería así

<div id="accordion">
 <h3 class="accordion title">Title</h3>
 <div class="accordion section">
  Section Content
 </div>

 <h3 class="accordion title">Title 2</h3>
 <div class="accordion section">
  Section Content
 </div>

 <h3 class="accordion title">Title 3</h3>
 <div class="accordion section">
  Section Content
 </div>

 <h3 class="accordion title">Title 4</h3>
 <div class="accordion section">
  Section Content
 </div>
</div>

Deberías evitar z-order por completo porque es un desastre de compatibilidad. En su lugar, los títulos de acordeón serían los que haría clic para abrir el acordeón. Desea establecer todas las secciones de acordeón <div> en visibility:hidden; de forma predeterminada, y luego, cuando se hace clic en una de ellas, cambie su visibilidad y oculte todas las demás. Si desea que funcione con cualquier cantidad de secciones de acordeón, debe contar cada <h3 class="accordion title"> y cada <div class="accordion section">, y emparejarlas en una matriz. Cuando se hace clic en un título, muestra su div correspondiente. Alternativamente, podría dar a cada uno una identificación por separado, pero la primera forma sería mucho más útil.

En realidad, podría ser display:none; en lugar de visibility:hidden;, probaría ambos.

Además, vale la pena mencionar que la animación generalmente se maneja cambiando cosas como el tamaño del div, por lo que si estuviera ocultando una sección, haría que la altura fuera cada vez más pequeña hasta que llegue a 0 y esté oculta.

1
Sneakyness 22 jul. 2009 a las 11:23

Consulte esta pregunta, notará que mi respuesta contiene una demostración con el trabajos básicos que deberían ayudarlo a comenzar. ¡Solo se le preguntó hace unos minutos!

Utiliza jQuery.

0
Community 23 may. 2017 a las 12:04