javascript - 仅 slideToggle() 子 div 的通用方法

Question

jquery 新手。我想做一个 slideToggle 来折叠 Accordion 并展开一个部分。

单击标题时，我想展开/折叠“#section”中的所有内容。

<h3 id="assignments">Assignments</h3>
    <div id="section">
      Assignment Count <input type="number" name="assignment_count">
    </div>

我有下面的代码。但我想让它变得通用，这样如果我点击任何标题，它只会折叠它下面的部分，而不是所有 ID 为“#section”的 div

$(document).ready(function(){
    $("h3").click(function(){
        $("#section").slideToggle();
    });
});

Answer 1

您可以使用 DOM 遍历来实现这一点。在h3 的click 处理程序中，next() 函数可用于检索以下元素。试试这个:

$('h3').click(function() {
  $(this).next('div').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Assignments</h3>
<div>
  Assignment Count
  <input type="number" name="assignment_count">
</div>

<h3>Foo</h3>
<div>
  Foo Count
  <input type="number" name="foo_count">
</div>

<h3>Bar</h3>
<div id="section">
  Bar Count
  <input type="number" name="bar_count">
</div>