Ho un menu a discesa all'interno di un DIV.Come sfocare l'elemento div?
Desidero nascondere il menu a discesa quando l'utente fa clic in qualsiasi altro punto.
$('div').blur(function() { $(this).hide(); }
non funziona.
So che .blur funziona solo con <a> ma in questo caso qual è la soluzione più semplice?
Penso che il problema è che i div non attivano l'evento onfocusout. Avrai bisogno di catturare gli eventi click sul corpo e poi allenarti se l'obiettivo era il menu div. In caso contrario, l'utente ha fatto clic altrove e il div deve essere nascosto.
<head>
<script>
$(document).ready(function(){
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
});
</script>
<style>#menu { display: none; }</style>
</head>
<body>
<div id="menu_button" onclick="$('#menu').show();">Menu....</div>
<div id="menu"> <!-- Menu options here --> </div>
<p>Other stuff</p>
</body>
Non penso che questo risponda alla domanda. La mia comprensione è che aamir vuole nascondere il div quando clicchi dentro, a meno che tu non faccia clic sull'elemento select. – ScottE
Questo è sbagliato. Cosa succede quando l'utente fa clic su un altro div che non fa parte del menu? – rahul
Un div può accettare lo stato attivo e rilasciare onfocus e onblur se si specifica un tabindex per esso. Prova questo: '
.click funzionerà correttamente all'interno del tag div. Assicurati di non essere in cima all'elemento select.
$('div').click(function(e) {
var $target = $(e.target);
if (!$target.is("select")) { $(this).hide() };
});
$("body").click(function (evt) {
var target = evt.target;
if(target.id !== 'menuContainer'){
$(".menu").hide();
}
});
dare il div un id, per esempio "menuContainer". quindi puoi controllare per target.id invece di target.tagName per assicurarti che sia quel div specifico.
Provare a utilizzare l'attributo tabindex sul div, vedi:
Controllare this postale per ulteriori informazioni e demo.
Questo non sembra funzionare su iOS Safari. – Rell
Per far funzionare il div deve essere focalizzato prima, quindi assicurati che sia focalizzato prima di provare a fare clic div esterno per vedere l'effetto – Bren
OMG ... GENIUS !! grazie mille ... qui stavo cercando di trovare un modo per creare un gestore di eventi personalizzato ... :) – carinlynchin
Non è il modo più pulito, ma invece di catturare ogni evento click sulla pagina è possibile aggiungere un collegamento vuoto al div e usarlo come "proxy di messa a fuoco" per il div.
Così il vostro markup cambierà a:
<div><a id="focus_proxy" href="#"></a></div>
e il tuo codice Javascript deve agganciare alla manifestazione sfocatura sul link:
$('div > #focus_proxy').blur(function() { $('div').hide() })
Non dimenticare di impostare la messa a fuoco sul collegamento quando si mostra il div:
$('div > #focus_proxy').focus()
Ho appena riscontrato questo problema. Immagino che nessuno dei precedenti possa risolvere correttamente il problema, quindi inserisco qui la mia risposta. E 'una combinazione di alcune delle risposte di cui sopra: almeno è fisso 2 problemi che si potrebbe incontrato da solo verificare se il punto cliccato è lo stesso "id"
$("body").click(function(e) {
var x = e.target;
//check if the clicked point is the trigger
if($(x).attr("class") == "floatLink"){
$(".menu").show();
}
//check if the clicked point is the children of the div you want to show
else if($(x).closest(".menu").length <= 0){
$(".menu").hide();
}
});
Sembra è necessario gestire l'evento onclick sul corpo e controllare se è stato cliccato sul div. Altrimenti, nascondi questo div. –