ここをクリックしてクラスを削除jQuery

Question

私は実際のナビゲーション項目を除いてどこかをクリックしてモバイルオープンメニューを閉じて閉じようとしています。

ここに私のHTML

<nav class="site-nav"> 
    <ul> 
    <li><a title="About Riad Kilani - Front End Developer" href="#">About</a></li> 
    <li><a title="Portfolio of Riad Kilani - Front End Developer" href="#">Portfolio</a></li> 
    <li><a title="Front End Development News and Tutorials from Riad Kilani" href="#">Blog</a></li> 
    <li><a title="Contact Riad Kilani" href="#">Contact</a></li> 
    </ul> 
</nav> 

<div id="content"> 
    <section id="featured"> 
    <a href="#" class="mobile-button"><i class="fa fa-bars">&nbsp;Site Name</i></a> 
    </section> 
</div> 

そして、ここでは私のJSは

$(document).ready(function(e) { 
    $(".mobile-button").click(function() { 
    $("#content").addClass("mobile-open"); 
    }); 

    $(document).click(function(event){ 
    if (event.target.id === 'site-nav') { 
    } else { 
     $("#content").removeClass("mobile-open"); 
    }     
    }); 
}); 

です私は間違って何をやっています？

*:not(.site-nav).click(fuction() { 
    // code that does stuff 
}); 

が.site-nav以外すべてを選択するには：あなたはこのjQueryのを使用することができます

$(document).ready(function (e) { 
    $(".mobile-button").click(function() { 
     $("#content").addClass("mobile-open"); 
    }); 

    $(document).click(function (e) { 
     if (!$(e.target).is('.site-nav').length) { 
      $("#content").removeClass("mobile-open"); 
     } 
    }); 
}); 

Answer 1

まず、あなたのリンククラスに追加します。 class="link"：その後

<nav class="site-nav"> 
    <ul> 
    <li><a class="link" title="About Riad Kilani - Front End Developer" href="#">About</a></li> 
    <li><a class="link" title="Portfolio of Riad Kilani - Front End Developer" href="#">Portfolio</a></li> 
    <li><a class="link" title="Front End Development News and Tutorials from Riad Kilani" href="#">Blog</a></li> 
    <li><a class="link" title="Contact Riad Kilani" href="#">Contact</a></li> 
    </ul> 
</nav> 

<div id="content"> 
    <section id="featured"> 
    <a href="#" class="mobile-button"><i class="fa fa-bars">&nbsp;Site Name</i></a> 
    </section> 
</div> 

、jQueryのコードの下に試してみてください。それはあなたが望むものであるかどうかをチェックできるよう

$(document).ready(function(e) { 
    $(".mobile-button").click(function(event) { 
     $("#content").addClass("mobile-open"); 
     event.stopPropagation(); 
    }); 

    $(document).click(function(event){ 
     if (!$(event.target).hasClass('link')) { 
      $("#content").removeClass("mobile-open"); 
     } 
    }); 
}); 

私はそのためjsFiddlerを作った - https://jsfiddle.net/o2gxgz9r/8261/。

Answer 2

はここにあなたのコードです。

Answer 3

：