html - jQuery，当单击div时，如何使div消失？

我试图达到以下行为：
当点击带有DivA id的链接“Option”时，DivB应该显示为淡入效果。如果我再次单击链接“Option”，或者单击页面中除DivB之外的任何其他地方，DivB应该再次取消映射。
这是我的HTML代码：

<a href="..." id="DivA">Option</a>
<div id="DivB">
  <ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
  </ul>
</div>

这是我的JQuery代码。这是错误的，如果DivB是隐藏的，我单击文档中的任何地方，DivB就会出现。

<script type="text/javascript">
    $(document).click(function () {
        $("#DivB").fadeToggle("200");
    });
    $("#DivA").click(function () {
        e.stopPropagation();
        return false;
    });
</script>

哪里错了？谢谢你的帮助。

最佳答案

$(function() {
  $(document).on("click",function (e) {
     if (e.target.id=="DivA") {
       $("#DivB").fadeToggle(200);
       e.stopPropagation();
       return false;
     }
     else if ($("#DivB").is(":visible")) {
       $("#DivB").fadeOut(200);
     }
  });
});