jQuery $（this）子选择器

Question 1

我正在使用这个：

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）选择器的子级的建议？但没有成功。

Question 2

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

Question 3

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

Question 4

使用.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/

Question 5

http://jqapi.com/ 遍历->树遍历->子级