jQuery nextAll() —单击 h 元素可切换所有 p 元素,直到下一个 h

发布于 2024-10-17 06:37:30 字数 898 浏览 5 评论 0原文

我找到了 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 或类。

谢谢!

I found an example of jQuery code and I'm trying to adapt and implement it. I'm creating an FAQ page where the answer is toggled by clicking on the question. The question is h1 and the answer is several "p" elements.

Like this:

<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>

My JS code is:

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

});

The problem is that this JS toggles just the first p element on the page. How can I toggle all p elements belonging to a certain question using NextAll()? Everything else is needed (sibling, etc), and I cannot use div's or classes.

Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

孤寂小茶 2024-10-24 06:37:30

使用 nextUntil()(docs)< /sup> 方法中,您调用选择所有下一个元素,直到到达特定的元素。

在本例中,我们使用 not-selector(docs) 选择元素,直到找到一个不是

元素。

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

如果你想向上滑动其他元素,可以使用 not() (docs) 方法来排除您刚刚切换的内容。

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

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

Using the nextUntil()(docs) method, you call select all the next elements until you reach a particular one.

In this case, we're using the not-selector(docs) to select elements until we reach one that is not a <p> element.

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

If you want to slideUp the other elements, you can use the not()(docs) method to exclude the ones you just toggled.

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

togg.siblings('p:visible').not(togg).slideUp(...
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文