0

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

これがコードです。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 は次のようになります。

<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/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」ボタンを押します）-しかし、それはこのフローティングだったようですアコーディオンが動かなくなった要素。「float: left;」を削除すると、- 通常どおりに機能しました。

そして、この同じ設定が jquery1.3.0 では機能するが、jquery1.3.2 では機能しないという事実から逃れることはできません。

4

2 に答える 2

1

アコーディオンライブラリもアップグレードする必要があるかもしれません。アコーディオンが使用するスタイルセレクターのような一部のスタイルセレクターは、[@attr]すでに非推奨になっている可能性があります。

于 2009-08-20T09:03:57.043 に答える
1

あなたのセレクター$(this).next(".accordion div")は機能しないと思います。next() は次の兄弟のみを取得するため、子を見るフィルターを実行するのは奇妙です。

また、純粋な css クラス セレクターではなく、nodeName でセレクターを使用するようにしてください。jsdiv.accordianだけでなく使用する.accordian

試す

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

});
于 2009-08-20T08:30:17.627 に答える