Javascript 在正文中单击 div 隐藏，当我单击 div 时它也会隐藏

in body click div hide, when i click on div also it hide

提问by hemc4

I want to show a div on link click and hide if click outside the link or div.

我想在链接点击时显示一个 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>

initially div is hidden. and script is

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

when I click on link div shows and overlaps some other elements, and when I click outside the body it dies. But the problem is when I click on input box to enter username login-panel div get hides. why div hide? any guidance will be appreciated.

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

回答by thirtydot

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

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

回答by A. Wolff

You should do it like this:

你应该这样做：

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

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

    }
});?

回答by Samuel Caillerie

When you are clicking on a sub-element, your condition (e.target.className) is not applied to your parent element (<div class="login-panel">). But you can use the closestfunction of jQuery (see here) in order to test if you are in your parent element :

当您单击子元素时，您的条件 (e.target.className) 不会应用于您的父元素 ( <div class="login-panel">)。但是您可以使用closestjQuery的功能（请参阅此处）来测试您是否在父元素中：

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

回答by Onur Topal

As the other saying clicking input cause event triggering in the body so you should check if the sender is child of the login I think below code do the trick;

正如另一句话所说，单击输入会在正文中触发事件，因此您应该检查发件人是否是登录的子项，我认为下面的代码可以解决问题；

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

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

Edit : update the condition with closest as it is correct function.

编辑：更新最接近的条件，因为它是正确的功能。

Begins with the current element, Travels up the DOM tree until it finds a match for the supplied selector. The returned jQuery object contains zero or one element for each element in the original set.

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

回答by Dhamu

Just find mouse when the click event occur,

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

<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> 

回答by Sibu

That because your input lies inside #logindiv, so if you click inside this div it will hide. So you can use jquery :notselector to specify those excluded elements

那是因为您的输入位于#logindiv 内，所以如果您在该 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

演示

回答by Armin

PROBLEM is when i click on input box to enter username login-panel div get hides. why div hide?

问题是当我点击输入框输入用户名登录面板 div 时隐藏。为什么div隐藏？

Because, you clicked the body too, when clicking in the div. Then both events are triggered. Check out event.stopPropagation()which you may use in the else part of body.onclick.

因为，在单击 div 时，您也单击了主体。然后触发两个事件。查看event.stopPropagation()，您可以在 body.onclick 的 else 部分使用它。

回答by Cerbrus

Here you go:

干得好：

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

You were using the wrong selector in your ifto check if a click on the body wasn't targeting a input element.

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

Fiddle

小提琴