jQuery div点击通过div并调用两个函数

Question

我的 jquery 代码有两个问题。 第一个问题是当我点击红框时它会缩小并切换位置，当我再次点击它时它会再次切换位置我不知道如何解决。

第二个问题是，当我点击黑色的 close 框时，它点击了 div 并点击了 open(红框)。

这是 JSFiddle

Answer 1

这里

http://jsfiddle.net/HQS8s/109/

您需要在关闭点击处理程序中使用 stopPropagation。如果您没有此停止点，则点击将冒泡到运行 a_demo_threee 的点击处理程序代码的 div 本身，因此位置会发生变化。

您需要重置顶部和左侧，因为 div 单击处理程序始终对顶部执行 -80px 从当前顶部位置开始，这就是为什么它总是重新定位并越来越多地向左上角移动。现在我们重置了它，所以它不会离开屏幕。

$(".a_demo_threee").click(function (e) { //opens the login

    e.stopPropagation();
    if( !$(this).hasClass('open') ) {
        $(this).stop().animate({
            "width": "100%",
            "height": "100%",
            "top": "-=80px",
            "left": "-=300px",
        }, 1000).addClass('open');
    }    

    $("#contentlogin").show(); 
});

    $("#close").click(function (e) {
        e.stopPropagation();
        $(".a_demo_threee").stop().animate({
            "width": "250px",
            "height": "150px",
            "top":"80px",
            "left":"300px"
        }, 1000).removeClass('open');

        $("#contentlogin").hide();
    });