1

以下のように、子要素のクリックで親divを折りたたもうとしています

HTML

<div class="expand">
    <h3>expand this div</h3>
    <a href="#" class="collapse" style="display:none;">Collapse</a>
</div>

CSS

.expand{
    border:2px dotted green;
}

jQuery

$('.expand').click(function(){
    $(this).stop().animate({
        width:'300px',
        height:'300px'
    });
    $('.collapse').show();
});

 $('.collapse').on('click',function(){
     $('.expand').stop().animate({
         width: '300px',
         height:'50px'
     });
 });

それは機能していません。私も使用してみまし$(this).parent().animation()たが、それも機能しません。

ここでどのような変更を行う必要がありますか?

ここでライブフィドル

4

3 に答える 3

2

これを試して：

$('.collapse').on('click',function(e){
     e.stopPropagation()
     $(this).parent('.expand').stop().animate({
         width: '300px',
         height:'50px'
     });
     $(this).hide();
});

デモはこちら

div内部の子をクリックすると親divもクリックされたため、コードは機能しませんでした。event.stopPropagation()の使用を停止し、コードは問題なく動作します。

また、クリック時に$(this).hide()非表示にする を追加しました。collapse

于 2013-04-16T06:09:31.623 に答える
2

試す：

$('.expand').on('click', '.collapse',function(e){
 e.stopPropagation();
 $(this).hide();
 $('.expand').stop().animate({
     width: '300px',
     height:'50px'
 });
});

デモ

于 2013-04-16T06:11:29.537 に答える
1

これは、展開機能をトリガーする div.collapseまでのリンク バブルをクリックするために発生します。.expand呼び出すことでバブリングを防ぐことができますevent.stopPropagation();

$('.collapse').on('click',function(e){
     e.stopPropagation();
     $('.expand').stop().animate({
         width: '300px',
         height:'50px'
     });
 });

http://jsfiddle.net/nvR2S/1/

于 2013-04-16T06:10:25.673 に答える