JQuery .each()切换隐藏的元素

Question

对JQuery来说很新,我很难理解.each().

我希望能够点击任何标题,并显示该标题下的段落,然后消失.目前,我只能得到第一段切换.

我的代码是:

<script>
$(document).ready(function(){
  $("h2").click(function(){
    $("#hidden").each(function(){
        $(this).toggle();      
    });
  });
});

</script>

<h2>HEADING 1</h2>
<div id="hidden" style="display:none">
<p>paragraph 1</p>
</div>

<h2>HEADING 2</h2>
<div id="hidden" style="display:none">
<p>paragraph 2</p>
</div>

非常感谢您的帮助!

Answer 1

ane元素的ID必须是唯一的use class属性才能对相似的元素进行分组

<h2>HEADING 1</h2>
<div class="hidden" style="display:none">
<p>paragraph 1</p>
</div>

<h2>HEADING 2</h2>
<div class="hidden" style="display:none">
<p>paragraph 2</p>
</div>

那么也就没有必要使用每个循环,你可以在选择器$('.hidden')返回的jQuery包装器中调用.toggle()

$(document).ready(function(){
  $("h2").click(function(){
    $('.hidden').toggle();      
  });
});

更新没有读完整的问题似乎是如何切换下一个div的问题

$(document).ready(function(){
  $("h2").click(function(){
    $('.hidden').hide();
    $(this).next().toggle();      
  });
});

演示:小提琴