Wenn Sie auf eine beliebige Stelle auf der Seite klicken, Dropdown-Menü ausblenden

Question

Ich habe viel über mein Problem gesucht, aber keine Lösung gefunden. Ich weiß, ich bin neu in JavaScript/JQuery, aber vielleicht kann mir jemand helfen :) Ich habe dieses nette Dropdown gemacht, was gerade funktioniert, wie ich es brauche, aber da ist der letzte Bug. Wenn ich irgendwo auf die Seite klicke, wird es nicht versteckt. Es gibt meine JSFiddle

Irgendwelche Lösungen dort?

Es ist mein JavaScript/JQuery

var $dropdown = $('.dropdown-content'); 

$(".dropdown-label").click(function(e){ 
    var $drop = $(this).toggleClass('dropdown--active').find(".dropdown-content").stop(true).toggle(100); 
    $dropdown.not($drop).stop(true).hide(100); 
    return false; 
}); 

Answer 1

Im folgenden Code ich nur das Dokument klicken Bindung hinzugefügt.

var $dropdown = $('.dropdown-content'); 

$(".dropdown-label").click(function(e){ 
    var $drop = $(this).toggleClass('dropdown--active').find(".dropdown-content").stop(true).toggle(100); 
    $dropdown.not($drop).stop(true).hide(100); 
    return false; 
}); 

$(document).on("click", function() { 
    $(".dropdown-content").hide() 
}) 

Answer 2

updated fiddle klicken Sie Dokument .Es wird die .dropdown-content verstecken .Und e.preventDefault() sie von anderen verhindern anwenden klicken

$(document).click(function(e){ 
$(".dropdown-content").hide(); 
e.preventDefault(); 
}) 

Answer 3

Hier ist die html ist

<div class="dropdown-content" style="width: 200px;height: 200px;border:1px solid #ccc;"></div> 

In Skriptdatei

$(document).on("click","body",function(e) { 
     if(!$(e.target).hasClass("dropdown-content")) { 
      $(".dropdown-content").hide(); 
     } 
    }); 

Hier 210

ist die Geige https://jsfiddle.net/ej4t2c5u/

Answer 4

.dropdown-Inhalt ändern es id und ich, was es ist schön und einfache Lösung

window.addEventListener('mouseup',function(){ 
 

 

 
var popup =document.getElementById('dropdown-content'); 
 

 

 

 
if (event.target != popup && event.target.parentNode != popup) 
 

 
{ 
 

 
popup.style.display='none'; 
 

 

 
} 
 

 

 

 

 

 

 
});