在外部单击时隐藏下拉菜单

Question

我使用jquery创建了一个带有下拉菜单的按钮。一切正常，但我希望您在按钮外单击时，下拉菜单会隐藏（如果已切换）。

这是我的代码：

HTML

<div class="dropdown">
  <button class=dropbtn>Je recherche...</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Item 1</a>
    <a href="#">Item 2</a>
    <a href="#">Item 3</a>
  </div>
</div>

jQuery

jQuery('.dropbtn').click(function() {
    jQuery('.dropdown-content').slideToggle('fast', function() {
    jQuery('.dropbtn').toggleClass("test", jQuery(this).is(':visible'));
  });
});

不确定在这里做什么...