jQueryの1.3.2でのアコーディオンは機能していない(1.3で働いていました!)
-
19-09-2019 - |
質問
オクラホマので、どこかで、何かが間違っています。私はバージョン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>
私はそれが動作しない場合には、第二パネルを展開するときに、最初のパネルは、通常のように崩壊すべきであるということであることに、注意しなければならない - ...しかし、1.3.2で、それはそうではありません。
<時間>*私はそれは問題を与えていたHTML / CSSたようだと、私は本当に起こっていたものでHTMLを更新しました。
私はに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.2と離れて、この同じセット・アップはjquery1.3.0で動作しているという事実からではなくなりません - !そう、何かがまだ間違っている。
解決
私はあなたの選択$(this).next(".accordion div")
が機能しないと考えています。次の()のみしたがって、子供を見てフィルタをやって次の兄弟が奇数のグラブます。
またnodeNameのではなく、純粋なCSSクラスセレクターとセレクターを使用するようにしてください。
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');
});
他のヒント
あなたは同様にあなたのアコーディオンライブラリをアップグレードする必要があるかもしれません。アコーディオンの用途は、すでに廃止されている場合があります[@attr]
スタイルのセレクタのようないくつかのスタイルセレクタます。