Accordion no colapsa

El siguiente código de acordeón no funciona correctamente para mí.Accordion no colapsa

<div class="accordion" id="accordion1"> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" 
      data-parent="#accordion1" href="#note1"> 
      Foo 
     </a> 
     </div> 
     <div class="accordion-body collapse" id="note1"> 
     <div class="accordion-inner"> 
      <pre>Foo body</pre> 
     </div> 
     </div> 
    </div> 
    <div class="accordion-group"> 
     <div class="accordion-heading"> 
     <a class="accordion-toggle" data-toggle="collapse" 
      data-parent="#accordion1" href="#note2"> 
      Bar 
     </a> 
     </div> 
     <div class="accordion-body collapse" id="note2"> 
     <div class="accordion-inner"> 
      <pre>Bar body</pre> 
     </div> 
     </div> 
    </div> 
</div>

Muestra y los elementos se expanden correctamente, pero los elementos no colapsarán. Cuando hago clic en un elemento abierto, se contrae brevemente y luego se expande nuevamente. He visto este comportamiento en las versiones de arranque 2.1.0 y 2.1.1. Además, estoy usando JQuery 1.7.2 y 1.8.2 y viendo en Chrome 22.

Fuente

2012-09-28 mightybyte

http://jsFiddle.net ;-) – yckart

Funciona bien para mí. ¿Cómo se ve la sección de tu cabeza? U mencionaste que estás usando dos versiones de jquery, ¿por qué? Además, ¿qué versiones de bootstrap js incluye? Complementos individuales o el paquete de complementos –

Sí, a mí también me funcionó en jsfiddle, pero todavía no funciona en mi sitio. No estoy usando dos versiones al mismo tiempo. Solo quería que la gente supiera que lo probé y tengo el mismo problema con dos versiones diferentes de bootstrap y dos versiones diferentes de JQuery. – mightybyte

El problema terminó siendo que accidentalmente había incluido todos mis archivos de script de JavaScript dos veces. Eliminar el duplicado solucionó todo. No sé cuán común es este error, pero si alguien más tiene este problema en el futuro, entonces podría ser útil tener esta respuesta en lugar de simplemente eliminar la pregunta.

Fuente

2012-10-01 17:50:16 mightybyte

Después de hora de depurar la clase Collapse, descubrí el mismo problema de carga doble que tenía. Estoy usando twitter-bootstrap-rails para incluir bootstrap. – jspooner

Hemos encontrado lo mismo a través de un menú que necesita bootstrap.js, y luego usar require para volver a cargarlo en la aplicación. Trabajamos a su alrededor manejando la expansión/colapso del acordeón mediante el uso de Javascript explícito en nuestra aplicación en lugar de anotaciones de datos. –

Mismo problema aquí: pasé al menos una hora, tal vez más, depurando esto solo para darme cuenta de que bootstrap.min.js estaba siendo incluido dos veces en dos archivos diferentes. Lo arreglé (nunca se me ocurrió hasta después de leer esto) y ahora funciona perfectamente. ¡Gracias por cometer este error primero y pensar en documentarlo! – JToland

Tuve el mismo problema. El problema fue que cargué jQuery después de bootstrap.

Fuente

2013-05-09 20:26:52 charlie

Respuesta

Cuestiones relacionadas