jquery - jQuery 中的切换错误

Question

我正在尝试在论坛上创建剧透 (vbulletin)它基本上是一个点击时切换的div。一切都运转良好，但是当将一个切换 div 放入另一个切换 div 中时动画只是上下不停地移动。 (它打开和关闭)

奇怪的是，当我在 jsfiddle 上测试它时，它工作正常。

在 vbulletin 上，jquery 代码被替换为 BBcode，如下所示

[spoiler] Text/Images [/spoiler]

HTML

<div class="head">
    Click to show content
</div>
<div class="body" style="display:none;">   
    Content
    <div class="head">
        Click to show content
    </div>
    <div class="body" style="display:none;">   
        Content
    </div>
</div>

Jquery

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

有人能想出解决办法吗？非常感谢任何帮助

这是在另一个切换 div 中带有切换 div 的 jsfiddle http://jsfiddle.net/9FP55/

Answer 1

使用嵌套的 .head 和 .body，您将需要一个更复杂的选择器:

$("div[id^=post_message] > .head, .body > .head").on("click", function(){
  $(this).next().slideToggle("slow");
});

当然，更好的解决方案不是一开始就造成这种歧义。

演示:http://jsbin.com/olizux/4/edit

也许这只是一个拼写错误，但您的代码不包含所需的 $:

(document).ready(function(){
  /* Code here */
});

应该是

$(document).ready(function(){
  /* Code Here */
});

或者简单地说

$(function(){
  /* Code Here */
});