关于jquery点击放大缩小的问题?

Question

在下新手有个问题想请教一下,下面这个实现点击后放大缩小的代码，再点了.close的这个click之后应该是要回到宽200px;高80px;的大小,但点击之后缩小后又会再放大,是因为.close标签是.box的子元素,导致点了.close也等于点了.box,所以又在执行了.box的放大,是这样的吗?

数据分析师 · Answer

关于jquery点击放大缩小的问题?-PHP中文网问答-关于jquery点击放大缩小的问题?-PHP中文网问答

围观一下哦，学习一下。

迷茫 · Answer

是，因为点了.close以后默认事件会冒泡到.box上。你可以用事件对象阻止事件冒泡：

$(document).ready(function(){
    $(".box").click(function(){
        $(this).animate({
            width:"400px",
            height:"300px"
        });
    });
    $(".close").click(function(event){
        event.stopPropagation(); //阻止事件冒泡
        $(".box").animate({
             width:"200px",
             height:"80px"
        });
    });
});