javascript - jQuery nextAll——点击 h 元素切换所有 p 元素直到下一个 h

Question

我正在创建一个常见问题解答页面，通过单击问题可以切换答案。问题是 h3，答案是几个 p 元素。像这样:

<h3>The First Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

<h3>The Second Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

如何切换属于某个问题的所有 p 元素？我的 JS 切换页面上所有以下 p 元素:

$(document).ready(function(){
    $("p").hide();
    $("h3").click(function(){
        $(this).nextAll("p").toggle();
    });
});

我不能使用 div 或类)。

Answer 1

执行此操作的最佳方法是使用 each 并进行迭代，直到到达应停止迭代的下一个元素。在 each 期间返回 false 会停止迭代。使用过滤器可以让您在迭代中检查元素的类型并做出适当的响应。

$(function() {
   $("p").hide();
   $("h3").click(function() {
       $(this).nextAll().each( function() {
           if ($(this).filter('h3').length) {
              return false;
           }
           $(this).filter('p').toggle();
       });
   });
});