blocks|key|1052698|text|我会这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1052699|$(function()+{
++$("p").hide();
++$("h3").click(function()+{
++++$(this).nextAll().each(function()+{
++++++if+($(this).is('h3'))+{
++++++++return+false;
++++++}
++++++$(this).toggle();
++++});
++});
});|code-block|syntax|javascript|1052700|从each()返回false结束链。|1052701|我还建议，如果可能的话，更好地组织您的数据来处理这种情况。例如：|1052702|<h3+class="question">Why+is+there+no+soup+for+me?</h3>
<div+class="answer">
<p>...</p>
<p>...</p>
<p>...</p>
</div>|1052703|然后这个问题就变得微不足道了：|1052704|$(function()+{
++$("div.answer").hide();
++$("h3.question").click(function()+{
++++$(this).next().toggle();
++});
});|1052705|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|Y|8|@]|9|@]|A|$E|F]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>I would do it this way:</p>

<pre><code>$(function() {
  $("p").hide();
  $("h3").click(function() {
    $(this).nextAll().each(function() {
      if ($(this).is('h3')) {
        return false;
      }
      $(this).toggle();
    });
  });
});
</code></pre>

<p>Returning false from each() ends the chain.</p>

<p>I would also suggest, if possible, structuring your data better to handle this scenario. For example:</p>

<pre><code>&lt;h3 class="question"&gt;Why is there no soup for me?&lt;/h3&gt;
&lt;div class="answer"&gt;
&lt;p&gt;...&lt;/p&gt;
&lt;p&gt;...&lt;/p&gt;
&lt;p&gt;...&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>and then the problem becomes trivial to solve:</p>

<pre><code>$(function() {
  $("div.answer").hide();
  $("h3.question").click(function() {
    $(this).next().toggle();
  });
});
</code></pre>


blocks|key|1052734|text|做到这一点的最好方法是使用each并迭代，直到到达应该停止迭代的下一个元素。在each过程中返回false会停止迭代。使用filter允许您在迭代中检查元素的类型并做出适当的响应。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1052735|$(function()+{
+++$("p").hide();
+++$("h3").click(function()+{
+++++++$(this).nextAll().each(+function()+{
+++++++++++if+($(this).filter('h3').length)+{
++++++++++++++return+false;
+++++++++++}
+++++++++++$(this).filter('p').toggle();
+++++++});
+++});
});|code-block|syntax|javascript|1052736|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>The best way to do this is using each and iterating until you get to the next element that should stop the iteration.  Returning false during an each stops the iteration.  Using filter allows you to check the type of the element in the iteration and respond appropriately.</p>

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


blocks|key|88990|text|这里有一个有趣的解决方案，它不使用.each()|type|unstyled|depth|inlineStyleRanges|entityRanges|data|88991|$("h3").click(function()+{

++++var+idx+=+$("h3,p").index(this);
++++var+nextIdx+=+($("h3,p").index($(this).nextAll("h3")));
++++var+nextPs+=+(nextIdx+==+-1)+?+$("h3,p").length+-+idx+:+nextIdx+-+idx;
++++$(this).nextAll("p:lt("+%2B+(nextPs+-+1)+%2B+")").toggle();

});|code-block|syntax|javascript|88992|我正在按索引查找下一个P。我不确定这有多实用，但这是一个很好的练习。|88993|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here is an interesting solution that doesn't use .each()</p>

<pre><code>$("h3").click(function() {

    var idx = $("h3,p").index(this);
    var nextIdx = ($("h3,p").index($(this).nextAll("h3")));
    var nextPs = (nextIdx == -1) ? $("h3,p").length - idx : nextIdx - idx;
    $(this).nextAll("p:lt(" + (nextPs - 1) + ")").toggle();

});
</code></pre>

<p>I'm looking for the next Ps by index. Not sure how practical this is, but it was a good exercise.</p>


blocks|key|1391346|text|我推荐jQuery+nextUntil();|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1391347|$(document).ready(function(){
++++$("p").hide();
++++$("h3").click(function(){
++++++++$("h3").nextUntil("h3").toggle();
++++});
});|code-block|syntax|javascript|1391348|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/nextuntil/^0|3|J|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>I would recommend <a href="http://api.jquery.com/nextuntil/" rel="nofollow">jQuery nextUntil();</a></p>

<pre><code>$(document).ready(function(){
    $("p").hide();
    $("h3").click(function(){
        $("h3").nextUntil("h3").toggle();
    });
});
</code></pre>


<p>I'm creating an FAQ page where the answer is toggled by clicking on the question. The question is <code>h3</code> and the answer is several <code>p</code>-elements. Like this:</p>

<pre><code>&lt;h3&gt;The First Question&lt;/h3&gt;
&lt;p&gt;Answer Paragraph&lt;/p&gt;
&lt;p&gt;Answer Paragraph&lt;/p&gt;
&lt;p&gt;Answer Paragraph&lt;/p&gt;

&lt;h3&gt;The Second Question&lt;/h3&gt;
&lt;p&gt;Answer Paragraph&lt;/p&gt;
&lt;p&gt;Answer Paragraph&lt;/p&gt;
</code></pre>

<p>How can I toggle all <code>p</code>-elements belonging to a certain question? My JS toggles all following <code>p</code>-elements on the page:</p>

<pre><code>$(document).ready(function(){
    $("p").hide();
    $("h3").click(function(){
        $(this).nextAll("p").toggle();
    });
});
</code></pre>

<p>I cannot use <code>div</code>'s or classes).</p>


jQuery nextAll -- Click on h-element toggles all p-elements until next h

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在创建一个常见问题页面，通过单击问题来切换答案。问题是h3，答案是几个p-elements。如下所示：<h3>The First Question</h3><p>Answer Paragraph</p><p>Answer Paragraph</p><p>Answer Paragraph</p><h3>The Sec...

问jQuery nextAll --单击h元素可切换所有p元素，直到下一个h
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery nextAll --单击h元素可切换所有p元素，直到下一个hEN