Javascriptの非表示メニュー

Question

私は、次のHTMLだ：私は、ユーザーがそれ以外の場所をクリックしたときに、私の.overlayを隠したときに、それを表示する必要が

$(document).ready(function(){ 
$('#otherdiv').on('mouseup', function(e){ 
    var left = e.clientX + "px"; 
    var top = e.clientY + "px"; 
    var div = $('.overlay'); 
    div[0].style.left = left; 
    div[0].style.top = top; 
    $(".overlay").show(200); 
    }); 
$(document).on('click', function(e) { 
    $('.overlay').hide(200); 
    }); 
}); 

：

<div id="otherdiv"></div> 
<div class="overlay"> 
    <div class="menu"> 
    <ul> 
     <li><a href="#">Val1</a></li> 
    <li><a href="#">Val2</a></li> 
    </ul> 
    </div> 
</div> 

とJSコードをユーザーは#otherdivをクリックします。 documentにイベントを添付してotherdivをクリックすると、私のオーバーレイが表示され、すぐに非表示になります。その行動を修正するには？ありがとうございました。 document.click確認の上

Answer 1

event.targetが#otherdivないか、または#otherdivとevent.targetの子でない場合は.overlayではないか、その子はその後$(".overlay")を非表示にします。

サンプルデモ用#otherdiv.overlayとのCSSをsnippet.Added>オーバーレイは、ユーザが外部

$(document).ready(function(){ 
 
$('#otherdiv').on('mouseup', function(e){ 
 
     e.preventDefault(); 
 
    var left = e.clientX + "px"; 
 
    var top = e.clientY + "px"; 
 
    var div = $('.overlay'); 
 
    div[0].style.left = left; 
 
    div[0].style.top = top; 
 
    $(".overlay").show(200); 
 
    }); 
 
    $(document).on('click', function(e) { 
 
    
 
    if(! $('#otherdiv').is(e.target)&& $('#otherdiv').has(e.target).length === 0 && !$('.overlay').is(e.target) && $('.overlay').has(e.target).length === 0){ 
 
    $('.overlay').hide(200); 
 
    } 
 
    
 
    }); 
 
});

#otherdiv{ 
 
width:100%; 
 
height:50px; 
 
background:#ddd; 
 
} 
 

 
.overlay{ 
 
    
 
background:red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="otherdiv"> 
 
    click here to show 
 
</div> 
 
<div class="overlay"> 
 
    <div class="menu"> 
 
    <ul> 
 
     <li><a href="#">Val1</a></li> 
 
    <li><a href="#">Val2</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

clickとmouseupにおけるイベント火災をクリックしたときにのみ表示されません同じ時間ここにそれについてもっと読む - https://www.quirksmode.org/dom/events/click.html

どのようにjQあなたのhide()アニメーションは、両方の機能が同時に起動していても、show()の後に200ms実行するようにキューに入れられます。

$(document).on('click', function(e) { 
    if(event.target.id == 'otherdiv' && !$('.overlay').is(":visible")) { 
     //do stuff to show 
    } 
    else if($('.overlay').is(":visible")) { 
     $('.overlay').hide(200); 
    } 
}); 

最初ifチェックがID otherdivを持つ要素がクリックされたことを確認すると、オーバーレイが現在表示されていないこと -

代わりに、私はこのために1つのクリックイベントを使用してお勧めします。次のifは、クリックがあり、オーバーレイが表示されているかどうかを確認します。