jQuery nextAll() - 点击 h 元素切换所有 p 元素直到下一个 h答案

【问题标题】：jQuery nextAll() — Click on h-element toggles all p-elements until next hjQuery nextAll() - 点击 h 元素切换所有 p 元素直到下一个 h
【发布时间】：2011-06-27 03:08:35
【问题描述】：

我找到了一个 jQuery 代码示例，我正在尝试调整和实现它。我正在创建一个常见问题解答页面，通过单击问题来切换答案。问题是 h1，答案是几个“p”元素。

像这样：

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

<h1>Second Question</h1>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

我的JS代码是：

$(document).ready(function(){

    $(".accordion h1:first").addClass("active");
    $(".accordion p:not(:first)").hide();

    $(".accordion h1").click(function(){
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h1").removeClass("active");
    });

});

问题是这个 JS 只切换页面上的第一个 p 元素。如何使用 NextAll() 切换属于某个问题的所有 p 元素？需要其他一切（兄弟姐妹等），我不能使用 div 或类。

谢谢！

【问题讨论】：

标签： jquery accordion

【解决方案1】：

使用nextUntil()^(docs) 方法，您调用选择所有下一个元素，直到您到达特定的元素。

在这种情况下，我们使用not-selector^(docs) 来选择元素，直到我们找到一个不是<p> 元素的元素。

$(this).nextUntil(':not(p)').slideToggle(...

如果要向上滑动其他元素，可以使用not()^(docs) 方法排除刚刚切换的元素。

var togg = $(this).nextUntil(':not(p)').slideToggle(...

togg.siblings('p:visible').not(togg).slideUp(...

【讨论】：

这对我帮助很大！谢谢先生。