我试图在点击下面的子元素
时折叠父divHTML
<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()
,但这也不行。
这里应该做些什么改变?
答案 0 :(得分: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
点击它。
答案 1 :(得分:2)
尝试:
$('.expand').on('click', '.collapse',function(e){
e.stopPropagation();
$(this).hide();
$('.expand').stop().animate({
width: '300px',
height:'50px'
});
});
答案 2 :(得分:1)
这是因为您单击.collapse
链接气泡直至.expand
div触发扩展功能。您可以通过调用event.stopPropagation();
$('.collapse').on('click',function(e){
e.stopPropagation();
$('.expand').stop().animate({
width: '300px',
height:'50px'
});
});