当单击页面上的任意位置时，下拉菜单隐藏

Question

我搜索了很多有关我的问题的信息，但没有找到任何解决方案。 我知道，我在JavaScript / JQuery中是新手，但是也许有人可以帮助我：)我做了一个不错的下拉列表，它的工作原理，需要的方式，但是有最后一个错误。 当我单击页面上的任何位置时，它都不会隐藏。 有我的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()
})

Answer 2

用文档更新小提琴点击。它将隐藏.dropdown-content 。并应用e.preventDefault() ，以防止其他点击

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

Answer 3

这是HTML

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

在您的脚本文件中

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

这是小提琴https://jsfiddle.net/ej4t2c5u/