javascript - jQuery 点击向下滑动特定的 div

Question

我的大脑完全崩溃了，但我不记得如何让特定的 div 在点击事件上执行 jQuery slideDown。

这是我一直在尝试做的事情:

$('.content--link').on('click', function(e) {
  $(this).next('.content').slideToggle();
  e.preventDefault();
});

body {
  padding: 20px;
}

.content {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="group">
  <div class="link">
    <a class="content--link" href="#">Click this 1</a>
  </div>
  <div class="content">
    <p>This is the content to show for 1</p>
  </div>
</div>

<div class="group">
  <div class="link">
    <a class="content--link" href="#">Click this 2</a>
  </div>
  <div class="content">
    <p>This is the content to show for 2</p>
  </div>
</div>

Link to Demo (CodePen)

我以前做过这个，但我不确定我有什么不正确的。我想我可能需要向上遍历然后再次返回 .parents 吗？无论如何，已经过去了一天。

Answer 1

几乎，使用$(this).parent().next('.content')。

.next() 在这种情况下不会单独工作，因为它会获取匹配元素集中每个元素的紧随其后的同级元素。 content--link 没有兄弟，但它的父 (div.link) 有。

https://api.jquery.com/next/

https://api.jquery.com/parent/