Question

感谢 inti的代码，我能够找到答案！

jQuery的：

$(document).ready(function(){
    $("body").click(function(e) {
        //checks to see if the tag you clicked has the #login
        //div as a parent.
        if($(e.target).closest("#login").size() == 0) {
            //makes exception for the #login's <a> tag (id of a_login)
            if((e.target.id) == 'a_login') {   
                $("#login").show();
            } else {
                $("#login").hide();
            }
        //if target has #login as parent, keep it visible   
        } else {
            $("#login").show();
        }
    });

});

工作jsfiddle示例：http://jsfiddle.net/SuperPhil/3CmE7/

谢谢！

我正在尝试使用类似于http://dropbox.com登录的登录屏幕。用户点击登录链接并显示div（CSS）并在焦点消失时消失。

这是我的jQuery

$('#login').bind('click', function() {
    $('#login').addClass("clicked").focusout(function() {
        $('#login').removeClass('clicked');
    });
});

这不起作用。任何人都可以帮助我吗？

修改

$('#login').click(function() {
    $('#login div').addClass("clicked").blur(function() {
        $('#login div').removeClass('clicked');
    }); 

});

Answer 1

您要查找的内容为.blur()而不是.focusout()。

编辑：点击#mydiv隐藏它：

$("body").click(function(e) {
    if ($(e.target).closest("#mydiv").size() == 0) {
        $("#mydiv").hide();
    }
});

如果您点击的内容没有将其作为其父母之一，则会隐藏#mydiv。

Answer 2

我认为你看起来像这样...

HTML：

<a href="#">Click Me</a>

<div id="login">
    <label>Username:</label><input type="text"/><br/>
    <label>Password:</label><input type="password"/><br/>
</div>

jQuery的：

$(document).ready(function(){
   $("#login").hide();
    $('a').bind('click', function() {
        $("#login").toggle().focus();
    });
    $("input").focusout(function(){
        $("#login").hide();
    });
});

http://jsfiddle.net/anish/ccFt9/1/

jquery：div hide / show on focus issue

2 个答案: