コンテナの外をクリックするとハンバーガーメニューが閉じます

Question

非常に簡単なハンバーガーメニューがあります。私はjQueryを使用して、ハンバーガーがクリックされたときに開閉するように切り替えます。しかし、私はdivやメニューの外のどこかをクリックすると、ユーザーがそれを閉じることができるようにしたいと思います。

jsfiddleは私が書いたものです。スタイリングに気をつけないでください。

私は

$(window).on('click', function(){ 
    $('.responsive-menu').removeClass('expand'); 
}) 

しかし、それは追加で、私も、メニューを開くことができないようなものを使用したいと思います。助けてください。ありがとうございました！

Answer 1

クリックした要素に親.responsive-menuまたは.menu-btnがあるかどうかを確認するのが難しいです。

2つのいずれかがあり、メニューが展開されている場合は、切り替えます！

Updated Fiddle

$(document).on("click", function(e){ 
    if( 
    $(e.target).closest(".responsive-menu").length == 0 && 
    $(".responsive-menu").hasClass("expand") && 
    $(e.target).closest(".menu-btn").length == 0 
){ 
    $('.responsive-menu').toggleClass('expand'); 
    } 
}); 

Answer 2

あなたは示されており、あなたのページ全体を覆っているオーバーレイを追加することができます。

空のマークアップ<div class="overlay"></div>を追加し、cssを使用すると、ハンバーガーボタンがクリックされるまで隠すことができます。次に、オーバーレイをクリックすると、ボタンのクリックがトリガーされます。

私はあなたのフィドルを更新： https://jsfiddle.net/nd96f398/2/