Javascript 单击页面上的任意位置时，请使用下拉菜单隐藏

我找了很多关于我的问题，但没有找到任何解决办法。我知道，我是JavaScript/JQuery新手，但也许有人能帮我：）我做了一个很好的下拉列表，什么才有效，我需要什么，但还有最后一个bug。当我点击页面上的任何地方时，它不会隐藏。这是我的

有什么解决办法吗

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

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

单击文档。它将隐藏

。下拉列表内容

。并应用

e.preventDefault（）

它们阻止其他单击

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

这是html

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

---

这是小提琴

@prasad有更全面的答案，因为他的包括阻止点击冒泡。我试图明确回答OP的问题。@VanquishedWombat你能告诉我你在回答中指定了什么吗？@prasad我只是说你的答案更完整。我的答案正是对OP的回答，但你的价值更高，所以你应该得到积分。

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