jquery - 想要使用两个不同的选择器切换 div - 一个用于显示，一个用于隐藏

Question

我有一个 div，一旦单击它就会向下扩展。但是，一旦 div 打开，我希望通过单击位于 div 内的箭头将 div 发送回其原始高度。我遇到了麻烦，因为现在每当单击箭头时，div 都会快速动画回其原始状态，因为我也在周围的 div 中单击。有没有办法确保只有箭头被点击并且它的动作会覆盖周围 div 的动作？这是我的动画代码：

$("#box1").click(function () {
    var $this = $(this),
    val = 500;
    $this.stop().animate({
        width: '100%',
        height: val
    }, "slow");
    $("#cat_title1").stop().hide("slow");
    $("#cat_content1").stop().show("slow");
    $("#up1").stop().show("slow");
});

$("#up1").click(function () {
    $("#cat_content1").stop().hide("slow");
    $("#up1").stop().hide("slow");
    val = 100;
    $("#box1").stop().animate({
        width: '100%',
        height: val
    }, "slow");
    $("#cat_title1").stop().show("slow");
});

“#box1”是 div，当它被点击时它会展开。

然后有一个箭头出现在名为“#up1”的 div 内。单击此按钮时，div 应以动画方式返回其未展开的形式。

感谢您对此的帮助。

最好的，

Answer 1

改成这样：

$("#up1").click(function (e) {
    e.stopPropagation();
    $("#cat_content1").stop().hide("slow");
    $("#up1").stop().hide("slow");
    val = 100;
    $("#box1").stop().animate({
        width: '100%',
        height: val
    }, "slow");
    $("#cat_title1").stop().show("slow");
});

e.stopPropagation()将防止事件冒泡到父 div，并且不会触发父 div 的点击处理程序。