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>

如何更改初始 jquery 代码，使其仅影响单击的 class1 下的 class2？我尝试了如何获取 $(this) 选择器的子项的建议？但还没有成功。

4

4 回答 4

93

使用 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。

于 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();
});

编辑：使它成为 .next 而不是 .siblings

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--> 树遍历--> Children

于 2009-05-08T20:06:22.720 回答