Vorrei sapere se questo è il modo corretto di nascondere elementi visibili quando si fa clic in qualsiasi punto della pagina.jQuery hide element quando si fa clic in qualsiasi punto della pagina
L'elemento (div, span ecc.) Non deve scomparire quando si verifica un evento di clic all'interno dei limiti dell'elemento.
se ho capito si vuole nascondere un div quando si fa clic ovunque, ma il div, e se non sceglie mentre oltre il div, allora non dovrebbe chiudere. si può fare questo:
$(document).click(function() {
alert("me");
});
$(".myDiv").click(function(e) {
e.stopPropagation(); // This is the preferred method.
return false; // This should not be used unless you do not want
// any click events registering inside the div
});
Questo si lega il clic per l'intera pagina, ma se si fa clic sul div in questione sarà annullare l'evento click.
Prova questa
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
utilizzare nome della classe invece di ID, perché in asp.net si deve preoccupare della roba in più .net attribuisce alla id
EDIT- Dato che hai aggiunto un altro pezzo, funzionerebbe in questo modo:
$('.myDiv').click(function() { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$('.openDiv').click(function() {
$('.myDiv').show();
});
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
lo avete esattamente opposto. È possibile aggiungere e rimuovere classi dagli elementi, l'ID non cambia mai –
no, lo si ha di fronte, mi riferivo a quando si utilizzano i controlli server asp.net .. gli ID cambiano si usa l'attributo runat = server – TStamper
leggi il mio commento e leggi OP è più attentamente. –
Questo non funziona: nasconde il .myDIV quando fai clic all'interno di esso.
$('.openDiv').click(function(e) {
$('.myDiv').show();
e.stopPropagation();
})
$(document).click(function(){
$('.myDiv').hide();
});
});
<a class="openDiv">DISPLAY DIV</a>
<div class="myDiv">HIDE DIV</div>
quindi vuoi che il div sia mostrato a mostrare quando viene inserito il link, quindi prendi e.stopPropa .. fuori da lì e segui la mia opzione – TStamper
Questo esempio di codice seguente sembra funzionare al meglio per me. Mentre puoi usare 'return false' che interrompe tutta la gestione di quell'evento per il div o qualcuno dei suoi figli. Se si desidera avere controlli sul div pop-up (un modulo di accesso a comparsa per esempio) è necessario utilizzare event.stopPropogation().
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<a id="link" href="#">show box</a>
<div id="box" style="background: #eee; display: none">
<p>a paragraph of text</p>
<input type="file" />
</div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
var box = $('#box');
var link = $('#link');
link.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
</html>
Grazie, Thomas. Sono nuovo di JS e sono impazzito per una soluzione al mio problema. Suo aiuto.
Ho usato jquery per creare una casella di accesso che scorre verso il basso. Per la migliore esperienza utente, preferisco che la casella scompaia quando l'utente fa clic da qualche parte, ma la casella. Sono un po 'imbarazzato per aver impiegato circa quattro ore a sistemarlo. Ma hey, sono nuovo di JS.
Forse il mio codice può aiutare qualcuno:
<body>
<button class="login">Logg inn</button>
<script type="text/javascript">
$("button.login").click(function() {
if ($("div#box:first").is(":hidden")) {
$("div#box").slideDown("slow");}
else {
$("div#box").slideUp("slow");
}
});
</script>
<div id="box">Lots of login content</div>
<script type="text/javascript">
var box = $('#box');
var login = $('.login');
login.click(function() {
box.show(); return false;
});
$(document).click(function() {
box.hide();
});
box.click(function(e) {
e.stopPropagation();
});
</script>
</body>
soli 2 piccoli miglioramenti ai suggerimenti di cui sopra:
fermata propagazione sull'evento che lo ha innescato, presupponendo un clic
jQuery(thelink).click(function(e){
jQuery(thepop).show();
// bind the hide controls
var jpop=jQuery(thepop);
jQuery(document).bind("click.hidethepop", function() {
jpop.hide();
// unbind the hide controls
jQuery(document).unbind("click.hidethepop");
});
// dont close thepop when you click on thepop
jQuery(thepop).click(function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});
Ho fatto il seguito. Ho pensato di condividere così anche a qualcun altro.
$("div#newButtonDiv").click(function(){
$(this).find("ul.sub-menu").css({"display":"block"});
$(this).click(function(event){
event.stopPropagation();
$("html").click(function(){
$(this).find("ul.sub-menu").css({"display":"none"});
}
});
});
Fammi sapere se posso aiutare qualcuno su questo.
Grande codice e non viene eseguito se non si fa clic su div # newButtonDiv'. Ti consiglio di rimuovere il secondo '.click()' sulla riga 4 (se lo fai, ricorda di rimuovere le parentesi graffe, parentesi e punto e virgola - riga 9). – AUllah1
A partire da jQuery 1.7 c'è un nuovo modo di gestire gli eventi. Ho pensato di rispondere qui solo per dimostrare come potrei fare il modo "nuovo". Se non lo hai, ti consiglio di leggere lo jQuery docs for the "on" method.
var handler = function(event){
// if the target is a descendent of container do nothing
if($(event.target).is(".container, .container *")) return;
// remove event handler from document
$(document).off("click", handler);
// dostuff
}
$(document).on("click", handler);
Qui stiamo abusando dei selettori di jQuery e degli spumeggianti eventi. Nota che mi assicuro di pulire il gestore eventi in seguito. È possibile automatizzare questo comportamento con $('.container').one (see: docs) ma poiché è necessario eseguire condizionali all'interno del gestore che non è applicabile qui.
Quindi ... questo ha funzionato PERFETTAMENTE per me nel caso qualcuno avesse bisogno di chiarimenti. È anche l'unica soluzione per aver funzionato per la mia situazione. –
Che cosa si può anche fare è:
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});
Se il tuo obiettivo non è un div poi nascondere il div controllando la sua lunghezza è pari a zero.
Rock. Questa soluzione ha funzionato come previsto per me. Grazie mille! – Bullyen
Prova questo, funziona perfettamente per me.
Un altro modo di nascondere il contenitore div quando un clic avviene in un elemento non figlio;
$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
});
$('html').click(function() {
//Hide the menus if it is visible
});
$('#menu_container').click(function(event){
event.stopPropagation();
});
ma è necessario tenere a mente queste cose. http://css-tricks.com/dangers-stopping-event-propagation/
$(document).on('click', function(e) { // Hides the div by clicking any where in the screen
if ($(e.target).closest('#suggest_input').length) {
$(".suggest_div").show();
}else if (! $(e.target).closest('.suggest_container').length) {
$('.suggest_div').hide();
}
});
Qui #suggest_input in è il nome della casella di testo e .suggest_container è il nome della classe UL e .suggest_div è l'elemento div principale per il mio suggerimento automatico.
questo codice serve per nascondere gli elementi div facendo clic su qualsiasi punto dello schermo. Prima di fare ogni cosa vi prego di capire il codice e copiarlo ...
Ecco un piccolo CSS soluzione di lavoro/JS in base alla risposta di Sandeep Pal:
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});
Prova ora facendo clic sulla casella di controllo e quindi al di fuori del menu:
Prova questa:
$(document).mouseup(function (e) {
var div = $("your div");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});
$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});
La risposta identica era già sotto. Circa 2 anni in ritardo. – Illdapt
$(document).ready(function(){
$("button").click(function(){
$(".div3").toggle(1000);
});
$("body").click(function(event) {
if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
$(".div3").hide(1000);}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>
<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>
no, hai il contrario, mi riferivo a quando usavo i controlli del server asp.net. .gli id cambiano si usa l'attributo runat = server – TStamper
no, si stava riferendo a qualcosa che l'OP non ha mai nemmeno accennato a lui non ha fatto menzione di asp.net, e la meravigliosa filosofia di denominazione dell'ID ctl ... .id. A parte questo, le regole HTML hanno dichiarato che gli ID non cambiano, e dal momento che stiamo parlando di javascript, le classi cambiano. –
cosa, quando le lezioni cambiano a meno che non le cambi tu, mi riferivo alle mie preferenze – TStamper