Question

我正试图在论坛上创建一个剧透（vbulletin）它基本上是一个点击切换div。一切正常，但是当在另一个切换div中放置一个toggle 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 */
});

Answer 2

试试这个

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

在jQuery中切换的错误

2 个答案: