2

フォーラム（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/

4

2 に答える 2

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 */
});
于 2012-05-13T07:08:02.167 に答える
0

これを試して

$(document).ready(function(){ 
$('.head').click(function() {
$(this).siblings('.body:first').stop(true,true).toggle('slow'); 
}); 
});
于 2012-05-13T07:26:05.073 に答える