Question

我正在使用它：

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>

如何更改初始jquery代码，使其仅在单击的class1下影响class2？我尝试了How to get the children of the $(this) selector?的建议，但没有成功。

Answer 1

使用HTML的最佳方式可能是使用next函数，如下所示：

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

由于点击处理程序发生在<a>，您还可以遍历父DIV，然后搜索第二个DIV。您可以使用parent和children的组合执行此操作。如果您提供的HTML不完全相同，并且第二个DIV可能位于相对于链接的另一个位置，则此方法最佳：

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

如果您希望“搜索”不仅限于直接子女，则可以在上面的示例中使用find代替children。

此外，如果可能的话，最好在您的类选择器前加上标签名称。即，如果只有<div>个标签会包含这些类，请将选择器设为div.class1，div.class2。

Answer 2

使用.slideToggle()：

可以简单得多

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

编辑：使用.next代替.siblings

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

您还可以添加Cookie以记住您所在的位置......

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

Answer 3

http://jqapi.com/ 遍历 - ＆GT;树遍历 - ＆gt;儿童

Answer 4

在点击事件中，“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

Jquery $（this）子选择器

4 个答案: