Un accordéon jQuery 1.3.2 ne fonctionne pas (travaillait à 1.3!)

Question

Ok, donc quelque part, quelque chose ne va pas. Quand j'utilisais la version 1.3 de l'accordéon fonctionnait très bien. Quand je mis à jour à la version jQuery 1.3.2 maintenant ne fonctionne plus comme il est censé. J'ai besoin la dernière version, car il résout quelques erreurs IE6 vomissais ...

Alors, voici le code, et ce qui doit changer pour que cela fonctionne avec la dernière vesion 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 va quelque chose comme:

<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>

Je constate que là où il ne fonctionne pas, est que lors de l'expansion d'un deuxième panneau, le premier panneau devrait s'effondrer normalement - mais avec 1.3.2 il est pas le cas ...

---

* J'ai mis à jour le code HTML avec ce que j'avais vraiment en cours, car il semble que ce soit le HTML / CSS qui donnait des problèmes.

J'avais le CSS réglé à:

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

pour que pour donner un effet « 2-colonnades comme table » (et pour faciliter le montage client CMS - cliquez sur le bouton « gras » et appuyez sur le bouton « i ») - mais il semble que ce soit cette flottant des éléments qui ont fait l'accordéon fonctionne pas. Lorsque j'ai enlevé le « float: left; » - il a travaillé à nouveau normalement.

Et il ne prend pas loin du fait que cette même installation fonctionne avec jquery1.3.0 mais pas avec jquery1.3.2 - si quelque chose est encore mal

Answer 1

Je crois que votre $(this).next(".accordion div") de sélection ne fonctionnera pas. suivant () saisit seulement le frère suivant fait donc un filtre qui regarde les enfants est impair.

Essayez également d'utiliser des sélecteurs avec un nodeName plutôt qu'un sélecteur pur classe css. Utilisez div.accordian plutôt que .accordian dans votre js

Essayez

 $(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

Vous devrez peut-être mettre à jour votre bibliothèque d'accordéon ainsi. Certains sélecteurs de style comme les sélecteurs de style [@attr] que les utilisations d'accordéon pourraient avoir été désapprouvés déjà.