jQueryの1.3.2でのアコーディオンは機能していない(1.3で働いていました!)

StackOverflow https://stackoverflow.com/questions/1304702

質問

オクラホマので、どこかで、何かが間違っています。私はバージョン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]スタイルのセレクタのようないくつかのスタイルセレクタます。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top