javascript - 切换下拉菜单并在外部点击时隐藏

Question

我得到了这个可以工作的下拉菜单，但我也希望当我点击它之外的时候它会关闭...我已经尝试了一些已回答的解决方案，但出了点问题，我无法弄清楚...有人能指出是什么吗我错过这里了吗？非常感谢

$("#toggle").on('click', function() {
   $(".dropdown").toggleClass("dropdown--visible");
});

$(document).click(function(){
    $(".dropdown").hide();
});

$(".dropdown").click(function(e){
    e.stopPropagation();
});

.dropdown {
  background: red;
  display: none;
}

.dropdown--visible {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="toggle">Toggle dropdown</button>

<div class="dropdown">
    <ul>
      <li>one</li>
      <li>two</li>
  </ul>
</div>

Answer 1

$("#toggle").on('blur click', function() {
   $(".dropdown").toggleClass("dropdown--visible");
});

$(document).click(function(){
    
});

.dropdown {
  background: red;
  display: none;
}

.dropdown--visible {
  display: block!important;
}
.dropdown--invisible {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="toggle">Toggle dropdown</button>

<div class="dropdown">
    <ul>
      <li>one</li>
      <li>two</li>
  </ul>
</div>