Question

我正试图为论坛创造某种“破坏者”。这很简单，虽然我对jquery很新。但是现在我在另一个切换div元素中放置一个toggle 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');
    });
});

Answer 2

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

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

Answer 3

您需要按类分隔它，然后使用一些不错的jQuery Traversal方法使其更清晰。

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

Working jsFiddle

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

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

jQuery，在切换中切换

3 个答案: