jquery window.click 第一次不工作

标签 jquery window slidetoggle

此处页面: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

提前致谢,如果您无法重现该错误,请告诉我。正如我所说,如果这不是您的前两次点击,它就会起作用。

鲍勃·G

最佳答案

您的问题如下:

$(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;
    });

在窗口的加载处理程序内部,而不是在单击处理程序中。现在的情况是,登录内容的单击处理程序仅在第一次窗口单击时分配,这解释了您的问题仅在第一次发生的事实。

关于jquery window.click 第一次不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5730606/

相关文章:

javascript - 无法单击 onClick() 事件下拉列表中的 anchor 标记

javascript - Jquery 附加超出最大高度

javascript - 在 highcharts 上执行单击事件时获取机器人 xAxis 值

jquery - 在 jQuery toggle 中我想改变按钮的形状

wpf - 限制 Window.SizeToContent 仅展开

javascript - 弹出窗口拦截器 API - 如何检查用户是否启用了它

jquery - 幻灯片切换 jQuery 函数

java - 为 jQuery "sortable"问题重新排序 li 元素

javascript - 将实际的 HTML 元素添加到 PRE/CODE 内容

wpf - 最大自定义窗口丢失阴影效果