Un acordeón en jQuery 1.3.2 no trabaja (trabajaba en 1.3!)

Question

Ok, así que en algún lugar, algo está mal. Cuando yo estaba usando la versión 1.3 del acordeón estaba bien trabajando. Cuando he actualizado a la versión de jQuery 1.3.2 ahora ya no funciona como se supone que debe. Necesito la versión más reciente, ya que es la solución de algunos errores que IE6 estaba vomitando ...

Así que aquí está el código, y lo que hay que cambiar para que funcione con la última vesión de jQuery?

$(function() {

$(".accordion h4").eq(2).addClass("active");
$(".accordion div").eq(2).show();
$(".accordion h4").click(function(){
    $(this).next(".accordion div").slideToggle("slow")
    .siblings("div:visible").slideUp("slow");
    $(this).toggleClass("active");
    $(this).siblings("h4").removeClass("active");
});
$("div.accordion div").hide();
$("h4#open").trigger('click');

});

HTML es algo como:

<div class="accordion">

<h4 id="open">Content header</h4>

<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>

</div>

<h4>Content header</h4>

<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>

</div>

<h4>Content header</h4>

<div>
<ul>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
<li><strong>Something</strong> <em>Else</em></li>
</ul>

</div>

deben tener en cuenta, que cuando no está trabajando, es que cuando se expande un segundo panel, el primer panel debería colapsar de forma normal - pero con 1.3.2 no es el caso ...

---

* He actualizado el código HTML con lo que realmente había en marcha, ya que parece que fue el HTML / CSS que estaba dando problemas.

Me había fijado el CSS a:

li strong{display:block;float:left;width:250px;background:#ccc;}
li em{display:block;float:left;width:700px;background:#ddd;}

a fin de que para dar un efecto de "2-columnas a modo de mesa" (y para facilitar la edición de cliente-CMS - pulsó el botón de "negrita" y pulsa el botón "i") - pero parece que fue esta flotantes de los elementos que hicieron que el acordeón no funciona. Cuando quité el "float: left;" - funcionó de nuevo con normalidad.

Y no le quita el hecho de que esta misma puesta a punto trabaja con jquery1.3.0 pero no con jquery1.3.2 - por lo que todavía le queda algo mal

!

Answer 1

Creo que su $(this).next(".accordion div") selector no funcionará. next () sólo se agarra el siguiente hermano, por tanto, hacer un filtro que se ve en los niños es impar.

Además, trate de utilizar los selectores con un nombreNodo en lugar de un selector de clase css puro. Utilice div.accordian en lugar de sólo .accordian en sus js

Trate

 $(function() {
   $("div.accordion h4").eq(2).addClass("active");
   $("div.accordion div").eq(2).show();

   $("div.accordion h4").live('click', function(){
       var $el = $(this);
       $el.next()
          .slideToggle("slow")
          .siblings("div:visible")
          .slideUp("slow");
       $el.toggleClass("active");
       $el.siblings("h4").removeClass("active");
   });

   $("div.accordion div").hide();

   $("h4#open").trigger('click');

});

Answer 2

Es posible que tenga que actualizar su biblioteca de acordeón también. Algunos selectores de estilo como los selectores de estilo [@attr] que utiliza el acordeón podrían haber quedado en desuso ya.