Jqueryについて、メニューの詳細を閉じるとき範囲外をクリックしても閉じれるようにする

Question

Jqueryについて、メニューの詳細を閉じるとき範囲外をクリックしても閉じれるようにしたいです。

jqueryのtoggleを用いてメニューの詳細を開いて閉じることは可能なのですが、それだと範囲外をクリックした時には何も起こらず、使い勝手の悪いサイトになってしまうので、範囲外をクリックしても、メニューの詳細が閉じるようにしたいです。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

                $(".top_nav2_con").on("click",function(){
                    $('.header_fix_open').toggle();
                })

.top_nav2_conがクリックするところで、.header_fix_openがクリックすると開くメニューになります。

試したこと

上の画像が参考画像です。

補足情報（FW/ツールのバージョンなど)

こちらがhtmlのコードなのですが、こちらに合わせて回答していただくと嬉しいです。

Answer 1

<script>
$(function(){
  $('#menu ul').hide();
  $('#menu').on('click',function(e){
    e.stopPropagation();
    $('ul',$(this)).toggle();
  });
  $(document).filter(function(){
    return $(this).closest('#menu').length==0;
  }).on('click',function(){
    $('#menu ul').hide();
  });
});
</script>
<nav id="menu">menu
<ul>
<li>sub1</li>
<li>sub2</li>
<li>sub3</li>
</ul>
</nav>