1

こんにちは、私が使用している jquery ui アコーディオンに基づいて、アコーディオン リスト項目にスライド トグルを追加しました。そのため、li をクリックすると、その下に div がスライドして、より多くのコンテンツが表示されます。

私が抱えている問題は、slidetoggle を参照するために複数の ID を作成する必要があることです。

div id css の例: #panel、#panel2、#panel3、#panel4 など....

別の番号を追加せずにスライドトグルを使用してスライドさせる方法はありますか? 使用している 50 個のリスト アイテムがあります。

これがjsのサンプルです（これでどこに行くのかがわかります）：

 $(".btn-slide").click(function(){
   $("#panel").slideToggle("slow");
   $(this).toggleClass("active"); return false;
 });
 $(".btn-slide2").click(function(){
   $("#panel2").slideToggle("slow");
   $(this).toggleClass("active"); return false;
 });

サンプルhtml:

  <li><div class="slide"><a href="#" class="btn-slide">One</a></div><div id="panel"></div></li>

  <li><div class="slide"><a href="#" class="btn-slide2">Two</a></div><div id="panel2"></div></li>
4

1 に答える 1

2

これは、すべてが 1 つのバインドで機能するはずです。

 $(".slide a").click(function(){
   $(this).toggleClass("active").parent().siblings().slideToggle("slow");
   return false;
 });

html を少し変更できる場合 (番号付けすらありません!)、次のように言います。

<li><div class="slide"><a href="#">One</a></div><div class="panel"></div></li>

より正確にすることができます：

 $(".slide a").click(function(){
  $(this).toggleClass("active").closest("li").find(".panel").slideToggle("slow");
  return false;
 });
于 2010-02-18T03:12:08.833 に答える