in body click div hide, quando clicco div diviso anche nascosto

Question

voglio mostrare un div sul collegamento clicca e nascondi se clicchi fuori dal link o 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> 

inizialmente div è nascosto. e 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(); 
     } 
    }); 
}); 

quando clicco sul collegamento div spettacolo e si sovrappongono alcuni altri elementi, quando scatto al di fuori del corpo muore. PROBLEMA è quando clicco sulla casella di input per inserire il nome utente login-panel div get hides. perché nascondersi? qualsiasi consiglio sarà apprezzato.

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

PROBLEMA è quando si fa clic sulla casella di immissione per inserire il nome utente login-panel div ottenere pelli. perché nascondersi?

Perché, si è fatto clic sul corpo anche quando si fa clic nel div. Quindi vengono attivati ​​entrambi gli eventi. Controlla event.stopPropagation() che puoi utilizzare nella parte restante di body.onclick.

Answer 3

Qui si va:

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

si stava utilizzando il selettore di sbagliato nel vostro if per verificare se un clic sul corpo non è stato rivolge ad un elemento di input.

Fiddle

Answer 4

Si dovrebbe fare in questo modo:

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 5

Questo perché il vostro ingresso si trova all'interno #login div, quindi se si fa clic all'interno di questo div si nasconderà. Così si può utilizzare jQuery :not selettore per specificare gli elementi esclusi

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

Quando si fa clic su un sotto-elemento, la sua condizione (e.target.className) non si applica al vostro elemento padre (<div class="login-panel">). Ma è possibile utilizzare la funzione closest di jQuery (vedi here) al fine di verificare se siete nel vostro elemento genitore:

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

Answer 7

Come l'altro dicendo cliccando evento di input causa scatenante in il corpo quindi dovresti controllare se il mittente è figlio dell'accesso credo che il codice sottostante faccia il trucco;

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

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

Modifica: aggiorna la condizione con la più vicina poiché è la funzione corretta.

Inizia con l'elemento corrente, Viaggia lungo l'albero DOM finché non trova una corrispondenza per il selettore fornito. L'oggetto jQuery restituito contiene zero o un elemento per ogni elemento nel set originale.

Answer 8

Basta trovare mouse quando si verificano l'evento click,

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