Question

我找到了jQuery代码的一个例子，我正在尝试调整和实现它。我正在创建一个FAQ页面，通过单击问题来切换答案。问题是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或类。

谢谢！

Answer 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(...

jQuery nextAll（） - 单击h元素切换所有p元素直到下一个h

1 个答案: