dans le corps de cliquer div cacher, quand je clique sur les div également le cacher

Je veux afficher un div sur le lien et cliquez sur masquer si cliquez en dehors du lien ou de la 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>

initialement div est caché. et le script est

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

quand je clique sur le lien div montre des chevauchements et certains autres éléments, et quand je clique sur l'extérieur du corps, il meurt.
Mais le problème est que lorsque je clique sur la zone de saisie pour entrer le nom d'utilisateur de connexion du panneau div obtenir des peaux.
pourquoi div cacher?
des conseils seront appréciés.

InformationsquelleAutor hemc4 | 2012-11-22

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

InformationsquelleAutor thirtydot

Vous devez faire comme ceci:

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

    }
});

InformationsquelleAutor A. Wolff

1

Lorsque vous cliquez sur un sous-élément, votre condition (e.cible.className) n'est pas appliqué à votre parent de l'élément (<div class="login-panel">). Mais vous pouvez utiliser le closest fonction de jQuery (voir ici) afin de tester si vous êtes dans votre élément parent :
```
if(e.target.className == "login" ||  $(e.target).closest(".login-panel").length === 1) {
    ...
}
```
InformationsquelleAutor Samuel Caillerie
0

PROBLÈME, c'est quand je clique sur la zone de saisie pour entrer le nom d'utilisateur de connexion du panneau div
obtenir des peaux. pourquoi div cacher?

Parce que, vous avez cliqué sur le corps aussi, lorsque vous cliquez dans la div. Ensuite, les deux événements sont déclenchés. Découvrez de l'événement.stopPropagation() qui vous pouvez utiliser dans la partie de corps.onclick.
- si les deux événements sont déclenchés e.cible.className == "login-panneau" doit être vrai.corriger si je me trompe
- Hm, oui. Cela semble raisonnable. Avez-vous essayé d'arrêter la propagation?
InformationsquelleAutor Armin

Que parce que votre entrée se trouve à l'intérieur #login div, donc si vous cliquez à l'intérieur de ce div, il va se cacher. De sorte que vous pouvez utiliser jquery :non sélecteur de spécifier ces éléments exclus

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

            }
        });
    });

DÉMO

InformationsquelleAutor Sibu

Ici, vous allez:

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

Vous utilisez le mauvais sélecteur dans votre if pour vérifier si un clic sur le corps n'était pas le ciblage d'un élément d'entrée.

Violon

InformationsquelleAutor Cerbrus

Juste trouver de la souris lorsque l'événement click se produire,

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

Ici la question n'est pas pour les appareils tactiles.!@jigneshkheni

InformationsquelleAutor Dhamu

0

Comme les autres en disant cliquant sur entrée provoquer l'événement qui déclenche dans le corps de sorte que vous devriez vérifier si l'expéditeur est un enfant de la connexion je pense que code ci-dessous faire l'affaire,
```
$("body").click(function (e) {

        var $sender = $(e.target);
        if ($sender.closest(".login-panel").length) {
            return ;
        } 
            $(".login-panel").hide();
    });
```
Edit : mise à jour de l'état avec le plus près c'est une fonction correcte.

Commence avec l'élément courant, se Déplace jusqu'à l'arbre du DOM jusqu'à ce qu'il trouve une correspondance fourni sélecteur. Le retour de l'objet jQuery contient zéro ou un élément pour chaque élément dans le jeu original.

InformationsquelleAutor Onur Topal

Vous devez vous connecter pour publier un commentaire.