html - JQuery、divのどこかをクリックするとdivが消えるようにする方法は?

Question

私は次の動作を達成しようとしています:

DivA id のリンク「オプション」をクリックすると、DivB がフェードイン効果で表示されます。「オプション」リンクをもう一度クリックすると、ページ内の 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>

間違いはどこですか？手伝ってくれてありがとう。

Answer 1

Live Demo

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

Answer 2

    $(document).mouseup(function(e) {
        var container = $("your selector here");
    
        // if the target of the click not the container or not a descendant of that container
        if (!container.is(e.target) && container.has(e.target).length === 0) {
            container.hide();
        }
    });