单击子元素折叠div

试试这个:

$('.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点击它

尝试:

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

演示

发生这种情况是因为单击.collapse链接气泡到.expanddiv触发了展开功能。可以通过调用event.stopPropagation();

来防止冒泡

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

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