要素の外側をクリックしたときにクラスを切り替える方法Jquery

Question

コードの最初のブロックが開き、同時に.main-navigationを閉じ、同時に影のオーバーレイをページに重ねます。しかし、私が達成したいのは、ナビゲーション外のどこかをクリックして、メニューが開いてオーバーレイがページ上にある場合にのみ（メニューを閉じてオーバーレイを削除する）、同じアクションを実行することです。

フィドル：常にfalseをもたらしif文、その中に$(document).click()火災、しばらくしてhttps://jsfiddle.net/bfgb951w/

<header id="ovlay"> 
      <span class="nav-toggle eq">&equiv;</span> 
      <nav class="main-navigation"> 
       <span class="nav-toggle">&times;</span> 
       <ul class="menu"> 
        <li><a href="#about" class="slide-section">About</a></li> 
        <li><a href="#works" class="slide-section">Works and stuff</a></li> 
        <li><a href="#contact" class="slide-section">Contact</a></li> 
       </ul> 
      </nav> 
     </header> 

$(document).ready(function(){ 
    $('.nav-toggle').on('click', function(){ 
     $('.main-navigation').toggleClass('open'); 
     $('#ovlay').toggleClass('overlay'); 
    }); 
}); 

$(document).click(function(){ 
    if($('.nav-toggle').hasClass('open')) { 
     $('.main-navigation').toggleClass('open'); 
     $('#ovlay').toggleClass('overlay'); 
    } 
}); 

Answer 1

あなたは.nav-toggle要素にopenクラスを設定することはありません。

$(document).ready(function(){ 
    $('.nav-toggle').on('click', function(){ 
     $('.main-navigation').toggleClass('open'); 
     $('#ovlay').toggleClass('overlay'); 
     return false; 
    }); 
}); 

$(document).click(function(event){ 
    if($('.main-navigation').hasClass('open') && $(event.target).closest(".main-navigation").length == 0) { 
     $('.main-navigation').toggleClass('open'); 
     $('#ovlay').toggleClass('overlay'); 
    } 
}); 

チェックこのフィドル：https://jsfiddle.net/1n78d9jq/

注クリックメインメニュー自体にあるときに閉鎖を防ぐdocument.clickで追加チェックをし、それを変更します。