jQuery，在切换内切换

Question

我正在尝试为论坛创建某种“剧透”。虽然我对 jquery 相当陌生，但它非常简单。但现在我在将切换 div 元素放置在另一个切换 div 元素内时遇到了这个问题，第二个切换不起作用。谁能指出我正确的方向？

Jquery

$(document).ready(function(){
    $('.head').click(function() {
  $('.body').toggle('slow')
  });
});

HTML

<div class="head">
Show Content
</div>
<!--1st toggle div-->
 <div class="body" style="display:none;">
  Content
    <div class="head">
     Show Content
    </div>
     <!--2nd toggle div-->
     <div class="body" style="display:none;">
     Content
     </div>
 </div>

JSFiddle here.

感谢所有试图提供帮助的人:)

编辑:

在我发布后，我发现我在 HTML 代码中使用了多个 ID。我已将 div id 更改为类，但现在当我单击显示 content1、content2 时也出现了。有人可以帮我吗？

Answer 1

两个 div 都会出现，因为 $('.body') 将匹配 DOM 中具有 body 类的所有元素，并对所有元素执行该函数.

为避免这种情况，请使用专门命名的 div 或向元素添加另一个标识符，如下例所示。

<div class="head" data-depth="1">
    Show Content 1
</div>
<!--1st toggle div-->
<div class="body" data-depth="1" style="display:none;">
    Content
    <div class="head" data-depth="2">
        Show Content 2
    </div>
    <!--2nd toggle div-->
    <div class="body" data-depth="2" style="display:none;">
        Content
    </div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​

$(document).ready(function(){
    $('.head').click(function() {
        var depth = $(this).attr('data-depth');
        $('.body[data-depth=' + depth + ']').toggle('slow');
    });
});​