Una fisarmonica in jQuery 1.3.2 non lavora (lavorava in 1.3!)

Question

Ok, quindi da qualche parte, qualcosa non va. Quando stavo usando la versione 1.3 la fisarmonica andava bene a lavorare. Quando ho aggiornato alla versione 1.3.2 jQuery ora non funziona più come dovrebbe. Ho bisogno della versione più recente, perché sta risolvendo alcuni errori che IE6 è stato vomitare ...

Quindi, ecco il codice, e ciò che deve cambiare in modo per farlo funzionare con le ultime vesion di 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 qualcosa come:

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

Vorrei sottolineare, che dove non funziona, è che quando l'espansione di un secondo pannello, il primo pannello dovrebbe crollare come normale - ma con 1.3.2 non è il caso ...

---

* Ho aggiornato il codice HTML con quello che veramente avevo in corso, come sembra che fosse il codice HTML / CSS che stava dando problemi.

Avevo il CSS impostata su:

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

in modo che esso per dare un effetto "2-colonne tabella-like" (e per un facile montaggio client-CMS - premere il pulsante "bold" e premere il pulsante "i") - ma sembra che è stato questo galleggiante degli elementi che hanno fatto la fisarmonica non funziona. Quando ho rimosso il "float: left;" - ha funzionato ancora una volta come normale.

E non toglie il fatto che questo stesso set-up funziona con jquery1.3.0 ma non con jquery1.3.2 - quindi qualcosa è ancora fuori posto

!

Answer 1

Credo che la vostra $(this).next(".accordion div") selettore non funzionerà. next () prende solo il prossimo fratello quindi fare un filtro che guarda i bambini è dispari.

Anche provare a utilizzare selettori con una nomeNodo piuttosto che un selettore di pura classe CSS. Utilizzare div.accordian piuttosto che solo .accordian nei tuoi js

Prova

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

Potrebbe essere necessario aggiornare la libreria di fisarmonica pure. Alcuni selettori di stile come i selettori stile [@attr] che gli usi di fisarmonica potrebbero essere stati deprecati già.