Una fisarmonica in jQuery 1.3.2 non funzionante (funzionava in 1.3!) - jquery, fisarmonica, espansione, compressione, jquery-1.3.2

Ok, quindi da qualche parte, qualcosa non va. Quando usavo la versione 1.3, la fisarmonica funzionava perfettamente. Quando ho aggiornato jQuery alla versione 1.3.2 ora non funziona più come dovrebbe, ho bisogno dell'ultima versione perché risolve alcuni errori che IE6 stava sollevando ...

Quindi, ecco il codice e cosa è necessario modificare per poter funzionare con l'ultima versione 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>

Dovrei notare che, dove non funziona, è che quando si espande un secondo pannello, il primo pannello dovrebbe collassare normalmente - ma con 1.3.2 non è il caso ...

---

* Ho aggiornato l'HTML con quello che stavo realmente succedendo, poiché sembra che sia stato l'HTML / CSS a dare problemi.

Ho avuto il CSS impostato su:

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

per poter dare un "2-columned table-like"effetto (e per un facile editing client-CMS - premi il pulsante "grassetto" e premi il pulsante "i") - ma sembra che sia stato questo fluttuare degli elementi a rendere la fisarmonica non funzionante. Quando ho rimosso il "float: left;" - ha funzionato di nuovo normalmente.

E non toglie il fatto che questo stesso set-up funziona con jquery1.3.0 ma non con jquery 1.3.3 - quindi qualcosa non funziona ancora!

risposte:

1 per risposta № 1

Credo il tuo selezionatore $(this).next(".accordion div") non funzionerà. next () afferra solo il fratello successivo, quindi fare un filtro che guarda ai bambini è strano.

Prova anche a utilizzare selettori con un nodoNome anziché un selettore di classe css puro. Uso div.accordian piuttosto che solo .accordian nel tuo js

Provare

 $(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");

});

---

1 per risposta № 2

Potrebbe essere necessario aggiornare anche la libreria di Accordion. Alcuni selettori di stile come il [@attr] selettori di stile utilizzati da Accordion potrebbero essere già stati deprecati.

---