倒塌的div

Question

我试图瓦解父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()太，但也没有工作。

这里应该做些什么改变？

LIVE FIDDLE HERE

Answer 1

试试这个：

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

DEMO HERE

您的代码并没有因为内子div父div也被点击的点击工作。我们已经停止使用event.stopPropagation()，你的代码工作正常。

还添加了$(this).hide()以点击它隐藏collapse。

Answer 2

发生这种情况是因为您单击了.collapse链接，直到.expand div触发扩展功能。你可以通过调用event.stopPropagation();

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

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

Answer 3

防止起泡尝试：

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

DEMO