/ / jQuery 1.3.2のアコーディオンは機能していない(1.3で動作していた!) - jquery、accordion、expand、collapse、jquery-1.3.2

jQuery 1.3.2のアコーディオンは動作しません(1.3で動作していました) - jquery、accordion、expand、collapse、jquery-1.3.2

さて、どこかで、何かが間違っています。 私がバージョン1.3を使用していたとき、アコーディオンは正常に動作していました。 jQueryをバージョン1.3.2にアップグレードしたとき、IE6が投げていたいくつかのエラーを解決しているので、最新のバージョンが必要です...

だからここにコードがあり、それがjQueryの最新のvesionで動作するためには何を変える必要があるのですか?

$(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は次のようになります。

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

私はそれがうまくいかないところでは、2枚目のパネルを展開すると、最初のパネルが通常どおりに崩壊するはずですが、1.3.2ではそうではありません...


*私は実際に何が起こっていたかでHTMLを更新しました.HTML / CSSが問題を起こしていたようです。

私はCSSを次のように設定しました:

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

それはそれが "2列のテーブルのような"(そして簡単なクライアント - CMS編集 - "太字"ボタンを押して "i"ボタンを押す) - しかし、アコーディオンを機能させなかったのは、この浮動小数点の要素だったようです。私が「フロート:左;」を取り除いたとき - それは正常として再び働いた。

そして、同じ設定がjquery1.3.0では動作しますが、jquery1.3.2では動作しないという事実を取り除いていないので、何かがまだ間違っています!

回答:

回答№1は1

私はあなたのセレクタを信じる $(this).next(".accordion div") 動作しないでしょう。 next()は、次の兄弟だけをつかむので、子供を見るフィルターは奇妙です。

また、純粋なcssクラスセレクタではなく、nodeNameを持つセレクタを使用してみてください。 つかいます div.accordian 単に .accordian あなたのjsで

試す

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

});

回答№2の場合は1

Accordionライブラリもアップグレードする必要があります。いくつかのスタイルセレクタは [@attr] アコーディオンが使用するスタイルのセレクタは既に廃止されている可能性があります。