jQuery nextAll() —单击 h 元素可切换所有 p 元素,直到下一个 h
我找到了 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
使用
nextUntil()
(docs)< /sup> 方法中,您调用选择所有下一个元素,直到到达特定的元素。在本例中,我们使用
not-selector
(docs) 选择元素,直到找到一个不是元素。
如果你想向上滑动其他元素,可以使用
not()
(docs) 方法来排除您刚刚切换的内容。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.If you want to slideUp the other elements, you can use the
not()
(docs) method to exclude the ones you just toggled.