仅slideToggle(）子类的通用方法

Generic way to only slideToggle() child div

本文关键字：方法 子类 slideToggle      更新时间：2023-09-26

jquery新手。我想做一个幻灯片切换到手风琴拼贴并展开一个部分。

单击标题时，我想展开/折叠"#部分"中的所有内容。

<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();
    });
});

您可以使用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>

您可以使用.next()，它可以获得紧随其后的同级。

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

此外，由于您希望使其通用，因此不要使用ID。请改用类。像这样的

<h3 class="assignments">Assignments</h3>
<div class="section">
  Assignment Count <input type="number" name="assignment_count">
</div> 
$("h3").click(function(){
  $(this).next(".section").slideToggle();
});


$("h3").click(function() {
  $(this).next(".section").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3 class="assignments">Assignments 1</h3>
<div class="section">
  Assignment Count
  <input type="number" name="assignment_count" />
</div>
<h3 class="assignments">Assignments 2</h3>
<div class="section">
  Assignment Count
  <input type="number" name="assignment_count" />
</div>
<h3 class="assignments">Assignments 3</h3>
<div class="section">
  Assignment Count
  <input type="number" name="assignment_count" />
</div>
<h3 class="assignments">Assignments 4</h3>
<div class="section">
  Assignment Count
  <input type="number" name="assignment_count" />
</div>

使用：header，您可以在任何标头上触发"on"点击事件，例如h1、h2、h3、h4、h5、h6.

$(document).ready(function(){
    $(":header").on('click',function(){
        $(this).nextUntil(":header").slideToggle();
    });
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="assignments1">Assignment1</h1>
    <div id="section">
      Assignment Count <input type="number" name="assignment_count">
    </div>
 <h2 id="assignments2">Assignments2</h2>       
    <div id="section">
      Assignment Count <input type="number" name="assignment_count">
    </div>
 <h3 id="assignments3">Assignments3</h3>       
 <div id="section">
      Assignment Count <input type="number" name="assignment_count">
    </div>
相关文章：