В теле нажмите div hide, когда я нажимаю на 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>

изначально div скрыт. и script

$(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 show и перекрываю некоторые другие элементы, когда я нажимаю на внешнее тело, он умирает. ПРОБЛЕМА - это когда я нажимаю на поле ввода, чтобы ввести имя пользователя. почему div hide? любое руководство будет оценено.

Ответ 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();
        }
    });
});

Ответ 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();

    }
});

Ответ 3

Когда вы нажимаете на подэлемент, ваше условие (e.target.className) не применяется к вашему родительскому элементу (<div class="login-panel">). Но вы можете использовать функцию closest jQuery (см. здесь), чтобы проверить, находитесь ли вы в своем родительском элементе:

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

Ответ 4

ПРОБЛЕМА - это когда я нажимаю на поле ввода, чтобы ввести имя пользователя login-panel div получить шкуры. почему div скрывается?

Потому что вы нажали и на тело, щелкнув в div. Затем запускаются оба события. Проверьте event.stopPropagation(), который вы можете использовать в другой части body.onclick.

Ответ 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

Ответ 6

Это потому, что ваш вход лежит внутри #login div, поэтому, если вы нажмете внутри этого div, он скроется. Таким образом, вы можете использовать jquery : not selector, чтобы указать те исключенные элементы

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

Ответ 7

Как и другое высказывание, нажатие на вход вызывает событие, вызывающее событие в теле, поэтому вы должны проверить, является ли отправитель дочерним по отношению к логину, который, как мне кажется, ниже кода, делает трюк;

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

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

Изменить: обновить условие с ближайшим, поскольку это правильная функция.

Начинается с текущего элемента, перемещается по дереву DOM, пока не найдет совпадение для поставленного селектора. Возвращенный объект jQuery содержит нуль или один элемент для каждого элемента в исходном наборе.

Ответ 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>