Ein Akkordeon in jQuery 1.3.2 funktioniert nicht (wurde in 1.3 zu arbeiten!)

Question

Ok, also irgendwo etwas nicht stimmt. Als ich Version mit 1.3 wurde das Akkordeon war in Ordnung arbeiten. Wenn ich jQuery-Version aktualisiert 1.3.2 es jetzt nicht mehr funktioniert, wie es sollte. Ich brauche die neueste Version, weil es einige Fehler zu lösen, dass IE6 wurde werfen ...

Hier ist also der Code, und was braucht, um zu ändern, um es mit jQuery neuesten vesion zu arbeiten?

$(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 geht so etwas wie:

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

soll ich beachten Sie, dass, wenn es nicht funktioniert, das ist, wenn eine zweite Platte erweitern, sollte die erste Platte als normal kollabieren - aber mit 1.3.2 ist es nicht der Fall ist ...

---

* Ich habe die HTML aktualisiert mit dem, was ich hatte wirklich vor sich geht, wie es scheint, dass es die HTML / CSS war, die Probleme gab.

Ich hatte die CSS auf:

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

, um für sie eine „2-Säulen tabellenartige“ Wirkung zu verleihen (und für eine einfache Client-CMS Bearbeitung - drücken Sie die „fett“ und drücken Sie die Taste „i“) - aber es scheint, dass es das war Aufschwimmen der Elemente, die das Akkordeon nicht funktionieren gemacht. Wenn ich die entfernt „float: left;“ - es funktionierte wieder normal.

Und es dauert nicht weg von der Tatsache, dass dieses gleiche Set-up mit jquery1.3.0 funktioniert aber nicht mit jquery1.3.2 - so ist immer noch etwas nicht in Ordnung

!

Answer 1

Ich glaube, Ihr Wähler $(this).next(".accordion div") wird nicht funktionieren. (Weiter) nur greift der nächste Geschwister deshalb einen Filter zu tun, die sich an Kinder sieht seltsam ist.

Versuchen Sie auch Selektoren zu verwenden, um mit einem nodeName eher als einem reinen CSS-Klasse-Selektor. Verwenden Sie div.accordian anstatt nur .accordian in Ihrem js

Versuchen

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

Sie müssen möglicherweise Ihre Akkordeon Bibliothek und aktualisieren. Einige Stilselektoren wie die [@attr] Stil Selektoren, die die Akkordeon Anwendungen veraltet sind bereits könnte.