javascript - jQuery slideToggle 嵌套 div

Question

好吧，这一定是时间的变化，但我终究无法弄清楚哪种方法可以针对 jQuery slideToggle 的特定 div。

我发誓我以前做过这个，但我不记得针对嵌套在父 div 中的特定 div 类的正确方法是什么。

这是一个示例:

$('.content').hide();
$('.slider').click(function() {
    $(this).next('.content').slideToggle();
    this.toggle = !this.toggle;
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
    <div class="link"> <a class="slider" href="#">Click Here</a> </div>
    <div class="content">
        <p> <a href="http://google.com" target="_blank">
Content stuff for item 1.
</p>
</div>
</div>

<div class="item">
  <div class="link">
<a class="slider" href="#">Click Here</a> </div>
    <div class="content">
        <p>Content stuff for item 2.</p>
    </div>
</div>

我只知道一些简单的事情，只是想不起来是什么了。

Answer 1

如何解决它的一种方法 - 使用 parent() 和 find() 函数。

$('.content').hide();
$('.slider').click(function() {
  $(this).parent().parent().find('.content').slideToggle();
  this.toggle = !this.toggle;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <div class="link">
    <a class="slider" href="#">Click Here</a>
  </div>
  <div class="content">
    <p>
      <a href="http://google.com" target="_blank">
Content stuff for item 1.</a>
</p>
</div>
</div>

<div class="item">
  <div class="link">
<a class="slider" href="#">Click Here</a>
  </div>
  <div class="content">
    <p>Content stuff for item 2.</p>
  </div>
</div>

另一个 - 使用 siblings()。

$('.slider').click(function() {
  $(this).parent().siblings('.content').slideToggle();
  this.toggle = !this.toggle;
});