单击页面上的任意位置时,下拉隐藏

Question

我搜索了很多关于我的问题,但没有找到任何解决方案.我知道,我是JavaScript/JQuery的新手,但也许有人可以帮助我:)我做了这个漂亮的下拉列表,什么工作正常,我需要什么,但有最后一个bug.当我点击页面上的任何地方时,它不会隐藏.这是我的JSFiddle

有解决方案吗？

这是我的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

在下面的代码中,我只添加了文档点击绑定.

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()
})