Question

如果在链接或div之外单击，我想在链接点击和隐藏时显示div。

<a href="#" class='login' id="login">login </a>
<div class="login-panel"> 
    <input type="text" id="LoginForm_username" name="LoginForm[username]" class="field" value="username">
    <input type="password" id="LoginForm_password" name="LoginForm[password]" class="field" value="password">
    <input type="submit" value="Login"  class="loginBtn">
</div>

最初div是隐藏的。和脚本是

$(document).ready(function() {
    $("#login").click(function () {
        $("div.login-panel").toggle();
    });

    $("body").click(function(e){
        if(e.target.className == "login" || e.target.className == "login-panel") { 
            //alert("do't hide");  
        }
        else {
            $(".login-panel").hide();
        }
    });
});

当我点击链接div显示并重叠其他一些元素时，当我点击身体外它就会死掉。但问题是当我点击输入框输入用户名login-panel div得到隐藏。为什么div隐藏？任何指导将不胜感激。

Answer 1

http://jsfiddle.net/thirtydot/F4p2x/15/

$(document).ready(function() {
    $("#login").click(function(e) {
        $(".login-panel").toggle();
        e.stopPropagation();
    });

    $(document).click(function(e) {
        if (!$(e.target).is('.login-panel, .login-panel *')) {
            $(".login-panel").hide();
        }
    });
});

Answer 2

你应该这样做：

http://jsfiddle.net/VWENB/1/

$("#login").click(function(e) {
    $("div.login-panel").toggle();
    e.stopPropagation();
});
$("body").click(function(e) {
    if (e.target.className == "field") {
        //alert("do't hide");  
    } else {
        $(".login-panel").hide();

    }
});

Answer 3

当您点击子元素时，您的条件（e.target.className）不会应用于您的父元素（<div class="login-panel">）。但是你可以使用jQuery的closest函数（参见here）来测试你是否在你的父元素中：

if(e.target.className == "login" ||  $(e.target).closest(".login-panel").length === 1) {
    ...
}

Answer 4

问题是当我点击输入框输入用户名login-panel div时得到生皮。为什么div隐藏？

因为，当你点击div时，你也点击了身体。然后触发两个事件。查看event.stopPropagation()您可以在body.onclick的其他部分使用的内容。

Answer 5

你走了：

$(document).ready(function () {
    $("#login").click(function () {
        $("div.login-panel").toggle();
    });
    $("body").click(function (e) {
        if (e.target.nodeName != "INPUT" && e.target.className!= "login" && e.target.className!= "login-panel") {
            $(".login-panel").hide();
        }
    });
});

您在if中使用了错误的选择器来检查正文上的点击是否未针对输入元素。

Fiddle

Answer 6

因为您的输入位于#login div内，所以如果您在此div中单击它将隐藏。因此，您可以使用jquery :not选择器指定那些被排除的元素

$(document).ready(function () {
        $("#login,:not('#LoginForm_username'),:not('#LoginForm_password')").click(function () {
            $("div.login-panel").toggle();
        });
        $("body").click(function (e) {
            if (e.target.className == "login" || e.target.className == "login-panel") {
                //alert("do't hide");  
            } else {
                $(".login-panel").hide();

            }
        });
    });

DEMO

Answer 7

正如另一个说点击输入引起事件中的事件触发所以你应该检查发件人是否是登录的孩子我认为下面的代码做了伎俩;

$("body").click(function (e) {

        var $sender = $(e.target);
        if ($sender.closest(".login-panel").length) {
            return ;
        } 
            $(".login-panel").hide();
    });

编辑：更新条件，因为它是正确的函数。

从当前元素开始，向上移动DOM树，直到找到所提供选择器的匹配项。返回的jQuery对象包含原始集合中每个元素的零个或一个元素。

Answer 8

只需在点击事件发生时找到鼠标，

<script type="text/javascript">
 find_mouse = false;

$(document).ready(function()
{
    $('.login-panel').hover(function(){ 
        find_mouse=true;  // if mouse on login-panel
    }, function(){ 
        find_mouse=false; // not on login panel
    });

    $("body").click(function(){ 
        if(! find_mouse) // if not on login panel
        $('.login-panel').hide();
    });
});
</script>

在body中点击div hide，当我点击div时它也隐藏了

8 个答案: