Question

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

第二个问题是当我点击它在div中点击的黑色close框并点击open（红框）时。

Answer 1

下面

您需要在关闭点击处理程序中使用stopPropagation。如果你没有这个停止，那么点击将冒泡到div本身，它运行a_demo_threee的点击处理程序代码，所以位置变了。

你需要重置你的top和left，因为div click处理程序总是从当前顶部位置为-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();
    });

Answer 2

将#close移出.a_demo_threee。

尝试：

HTML：

<a class="a_demo_threee">
    <div id="contentlogin"></div>     
    <div id="login"></div>
</a>
<div id="close">CLOSE</div>

JS：

$("#contentlogin").hide();
$(".a_demo_threee").click(function (e) {
    e.stopPropagation();    
    $(".a_demo_threee").stop().animate({
        "width": "100%",
        "height": "100%",
        "top": "-=80px",
        "left": "-=300px",
    }, 1000);
    setTimeout(function(){
        $("#close").fadeIn();
    },800);
    $("#contentlogin").show(); 
});
$("#close").click(function () {        
    $(".a_demo_threee").stop().animate({
        "width": "250px",
        "height": "150px",
        "top":"80px", //reset position
        "left":"300px"
    }, 1000);
    $("#close").fadeOut();
    $("#contentlogin").hide();
});

Fiddle here.

JQuery div点击div并调用这两个函数

2 个答案: