Ich habe ein Dropdown-Menü in einem DIV.Wie verwischt man das div-Element?
Ich möchte das Dropdown-Menü ausblenden, wenn der Benutzer irgendwo anders klickt.
$('div').blur(function() { $(this).hide(); }
funktioniert nicht.
Ich weiß. Blur funktioniert nur mit <a> aber in diesem Fall ist das die einfachste Lösung?
ich glaube, das Problem ist, dass divs Feuer nicht das onfocusout Ereignis. Sie müssen Klickereignisse auf dem Körper erfassen und dann herausfinden, ob das Ziel dann menu div war. Wenn dies nicht der Fall ist, hat der Benutzer auf eine andere Stelle geklickt und das div muss ausgeblendet werden.
<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>
Ich glaube nicht, dass dies die Frage beantwortet. Mein Verständnis ist, dass Aamir das div verbergen möchte, wenn Sie in das Innere klicken, es sei denn, Sie klicken auf das Element select. – ScottE
Das ist falsch. Was passiert, wenn der Benutzer auf ein anderes div klickt, das nicht zum Menü gehört? – rahul
Ein div kann den Fokus akzeptieren und onfocus und onblur ausgeben, wenn Sie einen tabindex dafür angeben. Versuchen Sie dies: '
.click funktioniert gut innerhalb der div-Tag. Stellen Sie nur sicher, dass Sie sich nicht über dem Element select befinden.
$('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();
}
});
die div eine ID geben, zum Beispiel "menuContainer". dann können Sie überprüfen, indem Sie target.id anstelle von target.tagName, um sicherzustellen, dass das bestimmte div.
Versuchen tabindex-Attribut auf Ihrem div finden Sie unter:
prüfen this Post für weitere Informationen und Demo.
Dies scheint nicht auf iOS Safari zu funktionieren. – Rell
Für diese die Div arbeiten muss zuerst fokussiert werden, also stellen Sie sicher, dass es fokussiert ist, bevor Sie versuchen zu klicken außerhalb div, um den Affekt zu sehen – Bren
OMG ... GENIUS !! Vielen Dank ... hier habe ich versucht, eine Möglichkeit zu finden, einen benutzerdefinierten Event-Handler zu machen ... :) – carinlynchin
Nicht der sauberste Weg, aber anstatt jedes Klickereignis auf der Seite zu erfassen, können Sie einen leeren Link zu Ihrem div hinzufügen und es als "Focus Proxy" für das div verwenden.
<div><a id="focus_proxy" href="#"></a></div>
und Ihre Javascript-Code sollte auf den Link zu der Unschärfe Ereignis Haken:
So wird Ihr Markup ändern
$('div > #focus_proxy').blur(function() { $('div').hide() })
den Fokus nicht auf den Link zu setzen Vergessen Wenn Sie das div anzeigen:
$('div > #focus_proxy').focus()
Ich bin gerade auf dieses Problem gestoßen. Ich denke, keiner der oben genannten kann das Problem richtig beheben, also poste ich meine Antwort hier. Es ist eine Kombination von einigen der oben genannten Antworten: es zumindest 2 befestigt Probleme, die man traf könnte überprüfen, indem Sie nur, wenn der klickten Punkt die gleiche „id“ ist
$("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();
}
});
Scheint Sie Onclick-Ereignis auf den Körper behandeln müssen und Überprüfen Sie, ob auf das div geklickt wird. Wenn nicht - verstecken Sie dieses div. –