AdminLTE 要素の範囲外をクリックした際に、指定のクラスを外す方法

AdminLTE を使用しています。

AdminLTEの機能で、
<a href="#" data-toggle="control-sidebar"></a> をクリックすると、
<aside class="control-sidebar control-sidebar-light"> に自動で、
control-sidebar-openクラスが付与され、
（<aside class="control-sidebar control-sidebar-light control-sidebar-open">）
再度、<a href="#" data-toggle="control-sidebar"></a>　をクリックすると、
control-sidebar-openクラスが外され、メニューが閉じることができるのですが、

<a href="#" data-toggle="control-sidebar"></a>クリックではなく、
control-sidebar以外の範囲をクリックした場合にも、
control-sidebar-openクラスが外され、メニューが閉じるようにしたいのですがどのようにしたらよいか教えていただけないでしょうか？

id="target"は自分で記述してみました。

vender/adminLTEが入ってないので、スニペットで同じような状況が作れず、
わかりにくい点もあるかと思いますが、何卒ご教授のほどよろしくお願いします。

$(function(){
  if($('#target').hasClass('control-sidebar-open')) {
    $().click(function(e) {
      if (!$(e.target).closest('#target').length) {
        $('#target').removeClass('control-sidebar-open');
      }
    });
  };
});

.control-sidebar {
    position: fixed;
    height: 100%;
    overflow-y: auto;
    padding-bottom: 50px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  
 <nav class="navbar navbar-static-top" role="navigation">
   <div class="navbar-custom-menu">
     <ul class="nav navbar-nav">
       <li>
         <a href="#" data-toggle="control-sidebar"></a>
         <aside class="control-sidebar control-sidebar-light" id="target">
           <ul class="menu>
            <li>A</li>
            <li>B</li>
            <li>C</li>
           </ul>
        </aside>
       </li>
     </ul>
   </div>
 </nav>