Question

页面：http://webpages.marshall.edu/~glasser1/jquery.html

我正在尝试复制旧的Twitter页面登录样式。如果用户点击“登录”，则应打开一个框以供他们登录，如果他们再次点击“登录”，则应隐藏自己。此外，如果用户点击“登录”框内部，那就没问题，并且框应该保留，但如果用户单击框的外部，则应该隐藏自己。

我无法解释的是，如果您的第一次点击是“登录”文本，而您的第二次点击是登录框，则该框会在不应该隐藏时隐藏。但是，如果这是您的前两次点击，则只会发生这种情况。在初次点击之后，一切都按预期工作。

以下是代码：

$("#logoncontent, #loginerror, #success").hide();
$(window).load(function(){
    //click "sign in" to toggle login box
    $("#signincontainer").click(function(e){
            $("#logoncontent").slideToggle(400);
            //stop prop from reaching parents up dom tree
            e.stopPropagation();
            // return false so that the click of "sign in" doesn't also trigger the $(window).click function below
            return false;
    });
    //if there is a click in the window
    $(window).click(function(){
        //if that click in the window was INSIDE of the box, break out of this function
        $("#logoncontent").click(function(){
            //breaking out of function
            return false;
        });
        //if the click was outside of box, slide content up
        $("#logoncontent").slideUp(400);
    });
});

同样，您可以在此处测试页面：http://webpages.marshall.edu/~glasser1/jquery.html

提前致谢，如果您无法重现错误，请与我们联系。正如我所说，如果不是你的前两次点击，它就有效。

Bob G

Answer 1

您的问题如下：

$(window).click(function(){
    //this part means that on the first click this handler is assigned
    $("#logoncontent").click(function(){
        //breaking out of function
        return false;
    });
    //if the click was outside of box, slide content up
    $("#logoncontent").slideUp(400);
});

你需要移动

    $("#logoncontent").click(function(){
        //breaking out of function
        return false;
    });

窗口的加载处理程序内部，而不是单击处理程序。现在的方式是，logoncontent的click处理程序仅在第一次单击窗口时分配，解释了您的问题最初只发生的事实。

Answer 2

我想你删除“e.stopPropagation（）;”

Answer 3

我决定整理一个如何解决这个问题的例子，采用与你不同的方法。在绑定到窗口的click事件上，我检查单击的元素是否在框内，如果不是，则隐藏框。

http://jsbin.com/okiqe6

jquery window.click第一次没有工作

3 个答案: