11

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

4

8 回答 8

27

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();
        }
    });
});
于 2012-11-22T10:36:44.977 回答
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();

    }
});​
于 2012-11-22T10:29:50.603 回答
1

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

if(e.target.className == "login" ||  $(e.target).closest(".login-panel").length === 1) {
    ...
}
于 2012-11-22T10:31:50.687 回答
0

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

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

于 2012-11-22T10:24:40.093 回答
0

干得好：

$(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来检查对正文的单击是否未针对输入元素。

小提琴

于 2012-11-22T10:28:11.040 回答
0

那是因为您的输入位于#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();

            }
        });
    });​

演示

于 2012-11-22T10:30:31.197 回答
0

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

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

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

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

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

于 2012-11-22T10:38:30.730 回答
0

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

<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>
于 2012-11-22T10:46:13.633 回答