jquery - 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在这里。

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

编辑：

在我发布之后，我发现我在 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');
    });
});​

Answer 2

是的，试试这个https://jsfiddle.net/ufC5B/2/

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

Answer 3

您需要按类将其分开，然后使用一些不错的 jQuery Traversal 方法使其更干净。

我们将使用 .next 选择器，这是一个实时的 jsFiddle。

工作 JSFiddle

这是我用来使它工作的代码；将头部和身体更改为类而不是 ID。

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