jQuery 領域外をクリックしてクラス削除

HTML

<ul class="mainMenu"> 
  <li>aaa</li>
  <li>bbb</li>
  <li>ccc</li>
</ul>

CSS

.mainMenu li.active{
  color: red;
}

JQuery

 $(function(){
 //Mainナビ
   $('.mainMenu li').click(function () {
     $('.mainMenu li').removeClass('active');
     $(this).addClass('active');
   });    
 });

$(document).on('click', function(e) {
  if (!$(e.target).closest('.mainMenu').length) {
    $('.mainMenu li').removeClass('active');
  }
}); 

これはハンバーガーメニューの時などによく使います。

<!-- ハンバーガーメニュー    -->
<div class="ham" id="ham">
  <span></span>
  <span></span>
  <span></span>
</div>      

<div class="header-nav-wrap">      

  <nav id="header-nav" class="header-nav">

    <ul class="header-nav-list">
      <li>about</li>
      <li>contact</li>
    </ul>

  </nav><!--header-nav-->         

</div><!--header-nav-wrap-->

  /* ---------------
   ハンバーガー
  ----------------*/ 
.ham {

  display: block;
  position: fixed;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: solid 1px black;
  z-index: 10;
  margin-right: 20px;
  background: rgba(white,.7);

  span {
    position: absolute;
    left: 9px;
    width: 22px;
    height: 2px;
    background-color: #333333;

    &:first-of-type{
      top: 11px;
      transition: all .3s;
    }
    &:nth-of-type(2){
      top: 18px;
    }
    &:last-of-type{
      top: 25px;
      transition: all .3s;
    }
  }//span 

}//ham
.header-nav{
  display:none;
}//header-nav


/* ハンバーガークリック時 */

.clicked{
  &.ham{
    z-index: 100;
    span{
      &:first-of-type{
        transform: rotate(45deg);
        top: 20px;
      }
      &:nth-of-type(2){
        width: 0px;
      }
      &:last-of-type{
        transform: rotate(-45deg);
        top: 20px;
      }        
    }//span    
  }//clicked.hem
  &.header-nav{ 
    display: block;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: green;
    padding: 80px 10px;
    max-width: 420px;
    width: 100%;
    z-index: 10;
    overflow: auto;

    .header-nav-list{
      flex-direction: column;
    }//.header-nav-list

  }//clicked.header-nav

}//.clicked    

//ハンバーガーメニュー
 $(function(){
      $('#ham').click(function(){
        $(this).toggleClass('clicked');
        $('#header-nav').toggleClass('clicked');
         
      });     
 });

$(document).on('click', function(e) {
  //globalNavi以外の箇所をクリックしたらclickeクラス削除
  if (!$(e.target).closest('#header-nav').length && !$(e.target).closest('#ham').length) {

    if( $('#ham').hasClass('clicked')){
      $('#ham').removeClass('clicked');
      $('#header-nav').removeClass('clicked');
    } 
  }  

}); 

codepen

See the Pen jQuery 領域外をクリックした時の指定 by seiko-takamori (@seiko-takamori) on CodePen.

https://codepen.io/seiko-takamori/pen/dymvxjM