javascript - online - filtro background css
¿Cómo desenfocar el elemento div? (6)
Tengo un menú desplegable dentro de un DIV.
Quiero que el menú desplegable se oculte cuando el usuario haga clic en otro lugar.
$(''div'').blur(function() { $(this).hide(); }
no está trabajando.
Sé que .blur solo funciona con <a> pero en este caso, ¿cuál es la solución más simple?
.click funcionará bien dentro de la etiqueta div. Solo asegúrate de no estar encima del elemento seleccionado.
$(''div'').click(function(e) {
var $target = $(e.target);
if (!$target.is("select")) { $(this).hide() };
});
Acabo de encontrar este problema. Supongo que nada de lo anterior puede solucionar el problema correctamente, así que publico mi respuesta aquí. Es una combinación de algunas de las respuestas anteriores: al menos solucionó 2 problemas que uno podría resolver simplemente comprobando si el punto en el que se hizo clic es el mismo "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();
}
});
Creo que el problema es que los divs no onfocusout evento onfocusout . Tendrá que capturar eventos de clics en el cuerpo y luego calcular si el objetivo era el menú div. Si no fue así, entonces el usuario ha hecho clic en otro lugar y la división debe estar oculta.
<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>
Intente usar el atributo tabindex en su div, vea:
Revisa this publicación para más información y demostración.
No es la forma más limpia, pero en lugar de capturar cada evento de clic en la página, puede agregar un enlace vacío a su div y usarlo como un "proxy de enfoque" para el div.
Así que su marca cambiará a:
<div><a id="focus_proxy" href="#"></a></div>
y su código de Javascript debe engancharse al evento borroso en el enlace:
$(''div > #focus_proxy'').blur(function() { $(''div'').hide() })
No te olvides de establecer el enfoque en el enlace cuando muestres el div:
$(''div > #focus_proxy'').focus()
$("body").click(function (evt) {
var target = evt.target;
if(target.id !== ''menuContainer''){
$(".menu").hide();
}
});
Dale al div un id, por ejemplo "menuContainer". luego puede verificar por target.id en lugar de target.tagName para asegurarse de que es ese div específico.