javascript - 使用此类的下一个 div 的 jQuery 切换

Question

我正在尝试在网站上实现切换效果。html 看起来像这样:

<div class="prod-toggle-click">
  <h2>Test</h2>
    <div class="prod-toggle">
      <p>test</p>
    </div>
</div>
<div class="prod-toggle-click">
  <h2>Test 2</h2>
   <div class="prod-toggle">
    <p>test 2</p>
   </div>
</div>

还有 JS:

<script>
$(".prod-toggle-click").click(function(){
    $(this).parent().find('.prod-toggle').toggle();
});
</script>

这会切换两个 div 的 .prod-toggle。但我只需要父级的 .prod-toggle 来切换。

我试过这样的:

<script>
$(".prod-toggle-click").click(function(){
    $(this).next('.prod-toggle').slideToggle();
});
</script>

但这也不起作用。有什么建议吗？

Answer 1

你只需要使用 find('.prod-toggle') 并删除你的 parent() 或 next()正在使用。这是因为类 prod-toggle 的 div 位于类 prod-toggle-click 的 div 中，所以find() 将在这里为您简单地工作。

$(".prod-toggle-click").click(function(){
    $(this).find('.prod-toggle').toggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="prod-toggle-click">
  <h2>Test</h2>
    <div class="prod-toggle">
      <p>test</p>
    </div>
</div>
<div class="prod-toggle-click">
  <h2>Test 2</h2>
   <div class="prod-toggle">
    <p>test 2</p>
   </div>
</div>