72

私はこれを使用しています：

jQuery('.class1 a').click( function() {
  if ($(".class2").is(":hidden")) {
    $(".class2").slideDown("slow");
  } else {
    $(".class2").slideUp();
  }
});

ページ構造:

<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>

次のような複数の class1/class2 セットがない場合にのみ機能します。

<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>
<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>
<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>

クリックされたclass1の下のclass2にのみ影響するように、最初のjqueryコードを変更するにはどうすればよいですか? $(this) セレクターの子を取得する方法からの推奨事項を試しましたか? しかし成功していません。

4

4 に答える 4

93

あなたが持っている HTML を使用する最善の方法は、おそらく次のようにnext関数を使用することです。

var div = $(this).next('.class2');

クリック ハンドラーが に対して発生している<a>ため、親 DIV までトラバースしてから、2 番目の DIV を検索することもできます。と を組み合わせてこれをparent行いchildrenます。このアプローチは、作成した HTML がそのようでなく、2 番目の DIV がリンクに対して別の場所にある可能性がある場合に最適です。

var div = $(this).parent().children('.class2');

「検索」を直接の子供に限定したくない場合は、上記の例のfind代わりに使用します。children

また、可能であればクラス セレクターの先頭にタグ名を追加することをお勧めします。つまり、<div>タグのみがこれらのクラスを持つ場合は、セレクターをdiv.class1, にしdiv.class2ます。

于 2009-05-08T20:04:52.130 に答える
9

クリックイベントでは、「this」はクリックされたタグです

jQuery('.class1 a').click( function() {
   var divToSlide = $(this).parent().find(".class2");
   if (divToSlide.is(":hidden")) {
      divToSlide.slideDown("slow");
   } else {
      divToSlide.slideUp();
   }
});

.siblings、.nextなどを使用することもできますが、divにアクセスする方法は複数あります。

于 2009-05-08T20:10:01.620 に答える
7

これは、.slideToggle（）を使用するとはるかに簡単になります。

jQuery('.class1 a').click( function() {
  $(this).next('.class2').slideToggle();
});

編集：.siblingsではなく.nextにしました

http://www.mredesign.com/demos/jquery-effects-1/

また、Cookieを追加して、現在の場所を記憶することもできます...

http://c.hadcoleman.com/2008/09/jquery-slide-toggle-with-cookie/

于 2009-05-08T20:17:28.950 に答える
5

http://jqapi.com/ Traversing--> Tree Traversal --> Children

于 2009-05-08T20:06:22.720 に答える