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's with.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 */
});

Answer 2

尝试这个

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