Event.targetとクラスを使用してオフスクリーンのナビゲーションを閉じる

Question

event.targetプロパティを理解するのに少し助けが必要です。

buttonがクリックされたときにスライドして外に出るnavを作成しました。 navが画面に表示されているときは、クラスnav-openが追加されています。私は、ユーザーがどこかをクリックした場合に機能を追加しようとしましたが、navそれが閉じてしまうので、私はターゲットにしようとし：

は

1. クラス名は
2. ユーザーが持つ

をクリックしてください次のコードは動作していないようです：

$(window).click(function(e) { 
     if(nav.hasClass('nav-open') && e.target != nav) { 
      nav.removeClass('nav-open'); 
     } 

    }); 

誰でも助けてもらえますか？下の完全なスニペット。

$(document).ready(function() { 
 
\t 
 
\t var button = $('button'); 
 
\t var nav = $('nav'); 
 
\t 
 
\t button.click(function() { 
 
\t \t nav.toggleClass('nav-open'); 
 
\t }); 
 
\t 
 
// \t $(window).click(function(e) { 
 
// \t \t if(nav.hasClass('nav-open') && e.target != nav) { 
 
// \t \t \t nav.removeClass('nav-open'); 
 
// \t \t } 
 
\t \t 
 
// \t }); 
 
\t 
 
\t 
 
\t 
 
\t 
 
});

* { 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
.container { 
 
\t border: 1px solid; 
 
\t height: 1000px; 
 
\t width: 100%; 
 
\t background-color: #ccc; 
 
\t position: relative; 
 
\t z-index: 1; 
 
} 
 

 
button{ 
 
\t position: relative; 
 
\t left: 500px; 
 
\t top: 30px; 
 
} 
 

 
nav { 
 
\t height: 100vh; 
 
\t width: 300px; 
 
\t left: 0; 
 
\t top: 0; 
 
\t position: absolute; 
 
\t background-color: #444; 
 
\t z-index: 2; 
 
\t transform: translate3d(-300px,0,0); 
 
\t transition: all .4s ease; 
 
} 
 
.nav-open { 
 
\t transform: translate3d(0px,0,0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav></nav> 
 
<div class="container"> 
 
\t <button>click me</button> 
 
</div>

Answer 1

あなたはバブルアップからのイベントを防ぐためにevent.stopPropagation()を必要としています。

$(document).ready(function() { 
 
\t 
 
\t var button = $('button'); 
 
\t var nav = $('nav'); 
 
\t 
 
\t button.click(function() { 
 
\t \t nav.toggleClass('nav-open'); 
 
\t }); 
 
\t 
 
    $("body").on("click", ".container", function(e){ 
 
    e.preventDefault(); 
 
    if($("nav").hasClass("nav-open")){ 
 
     $("nav").removeClass("nav-open"); 
 
    } 
 
    }).on("click", "nav, button", function(){ 
 
    e.stopPropagation(); 
 
    }) 
 
\t 
 
\t 
 
\t 
 
\t 
 
});

* { 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

 
.container { 
 
\t border: 1px solid; 
 
\t height: 1000px; 
 
\t width: 100%; 
 
\t background-color: #ccc; 
 
\t position: relative; 
 
\t z-index: 1; 
 
} 
 

 
button{ 
 
\t position: relative; 
 
\t left: 500px; 
 
\t top: 30px; 
 
} 
 

 
nav { 
 
\t height: 100vh; 
 
\t width: 300px; 
 
\t left: 0; 
 
\t top: 0; 
 
\t position: absolute; 
 
\t background-color: #444; 
 
\t z-index: 2; 
 
\t transform: translate3d(-300px,0,0); 
 
\t transition: all .4s ease; 
 
} 
 
.nav-open { 
 
\t transform: translate3d(0px,0,0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav></nav> 
 
<div class="container"> 
 
\t <button>click me</button> 
 
</div>