javascript - divの外側をクリックするとdivを非表示

Question

この JQuery 関数に少し問題があります。

基本的に、クリックすると別のDivが表示されるdivがあります。実際にはトグルに設定されているため、クリックするとオン/オフが切り替わります。

開いた div (最初の div をクリックした後に表示される) の外側をクリックすると、開いた div が閉じられるようにしたいと考えています。

$("#idSelect").click(function() {
   $("#idDiv").toggle();
});

Answer 1

編集：ここでのより良いアプローチ：
カスタムモーダルポップアップを作成する方法-そしてそれの外側をクリックして閉じる方法

---

jsBinデモ

$( "#idSelect" ).click(function( e ) {
   e.stopPropagation();
   $("#idDiv").toggle();
});

$( "#idDiv" ).on('click',function( e ) {
     e.stopPropagation();
});

$( document ).on('click', function( e ) {
   if( e.target.id != 'idDiv' ){
       $( "#idDiv" ).hide();
   }   
});

Answer 2

お役に立てれば：

$(document).click(function() {
   if($(window.event.target).attr('id') != 'idSelect')
       $("#idDiv").hide();
});

Answer 3

jQuery-outside-eventsプラグインは、次のイベントのサポートを追加します

clickoutside、dblclickoutside、focusoutside、bluroutside、mousemoveoutside、mousedownoutside、mouseupoutside、mouseoveroutside、mouseoutoutside、keydownoutside、keypressoutside、keyupoutside、changeoutside、selectoutside、submitoutside。

あなたができるあなたのケースに適用されます

    $("#idDiv").on("clickoutside", function( ) {
        $("#idDiv").hide();
    });

    $("#idSelect").on("click", function( e ) {
        $("#idDiv").toggle();
        e.stopPropagation();
    });

デモはこちら

Answer 4

$(document).on("click",function(e) {
   if ($(e.target).is("#idDiv, #idDiv *"))
       $("#idDiv").show();
   else
       $("#idDiv").hide();
});