web-dev-qa-db-ja.com

外部をクリックしたときにDIV要素を非表示にする方法

divがあり、外側をクリックしたときに非表示にしたい。私のコードは：

<div id="mydiv">The div must be above button</div>

    $('#mydiv').click(function(e) {
        e.stopPropagation();
    });

    $(document).click(function() {
        $('#mydiv').fadeOut(300);
    });

しかし、それは私のために働いていません...

[〜＃〜]更新[〜＃〜]

完全なコードを以下に示します。ボタンをクリックすると、上にdivが表示されるので、外側をクリックすると、このdivを非表示にする必要があります。

[〜＃〜] demo [〜＃〜]

<div id="but" style="text-align: right;"><button type="button">Show Div!</button></div>
<div id="mydiv" style="display:none;">The div must be above button</div>

$("#but button").click(function(){
  var pos = $(this).offset(),
      div = $("#mydiv");

  // Make it visible off-page so
  // we can measure it
  div.css({
    "display": "block",
    "border": "1px solid black",
    "position": "absolute",
    "left": -10000,
    "top": 0
  });

  // Move it where we want it to be
  div.css({
    "left": pos.left - 40,
    "top":  pos.top - div.height() - 10
  });
});

$('#myDiv').click(function(e) {
    e.stopPropagation();
});
$(document).click(function() {
    $('#mydiv').fadeOut(300);
});
jqueryhtmlhide
13
andys

JavaScriptclickは バブルイベント であり、divとdocumentまで続きます。 stopPropagation()関数を使用してイベントの伝達を停止すると、ドキュメントのクリックは処理されません。したがって、問題を解決するには、e.stopPropagation()を削除するだけです。

デモ1

最善の方法は次のとおりです。

_$('#mydiv').click(function(e) {
    e.stopPropagation();
    $(this).fadeOut(300);
});
_

デモ2

このdivをクリックした場合、外側をクリックしてこのdivを非表示にする方法を教えてください。

では、想像してみましょう。IDが「wrapperId」のコンテナをクリックすると、「myDiv」が非表示になるはずです。

_$("#wrapperId").click(function(e){
  $('#mydiv').fadeOut(300);
})
_

コンテナがドキュメントの場合、$(document)の代わりに$("#wrapperId")を使用できます。

デモ

何が起こっているのか見ていない： jsbin.com/ilowi​​j/7

ボタンをクリックするときは、クリックイベントの伝播を停止する必要があります。次の変更を行います。

_$("#but button").click(function(e){
    e.stopPropagation();
    ...
}
_

デモ4

12
Warlock

イベントターゲットをチェックする以下のコードで試してください

 $(document).click(function(e) {
  if(e.target.id!="mydiv"){  // if click is not in 'mydiv'
    $('#mydiv').hide(3000);
  }
});
8
prakash2089

ドキュメントにクリックイベントをバインドするよりも、次の種類のスニペットを使用できます。

デモを見る

$('#mydiv').click(function(e) {
        e.stopPropagation();
    })
    .css({outline:0})
    .focusout(function(){
         $(this).fadeOut(300);  
    }).focus();
2
A. Wolff

簡単で再帰的に動作する以下の解決策を試してください：

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});
1
Sam G

Css3ターゲットを使用するすべての理由

<a href='#login'>Login</a>


<div id='login'>
  blah blah blah
</div>


css:

#login{width:400px;height:600px;background:#fff;margin:10%
       auto;position:absolute;left:0;right:0;
      }

now we will hide the login box by putting a class on it 

<div class='lightbox' id='login'>

</div>

css:

.lightbox{display:none;}
.lightbox:target{display:block;}

それはすべてのコードがあまりにもJavaScriptを使用する必要はありません

1
codecare.nl

これをチェック

<a href="#" id="link">Click me</a>

    (function($) {

  $("#link").click(function(e){
    e.stopPropagation();
    var div = $("#show_hide");

    // Make it visible off-page
    div.css({
      "display": "block"
    });

  });
$(document).click(function(e){
  $('#show_hide').fadeOut(300);
});
})(jQuery);

たとえば、このリンクをチェックアウトできます。

これをチェックしてください http://jsfiddle.net/x5Env/

0
saadk

最も簡単な方法は、ドキュメントのonclickイベントをキャプチャすることです。このクリックイベントは、関心のある要素の外で発生し、その後falseを返します。このトリックを使用して、メニューイベントの外側のクリックが発生したときにポップアップメニューを非表示にしました。

0
Zac Zeng

$('html').click(function() {$("div").css({"display": "none"}); _});_ $('.option').click(function(event){event.stopPropagation(); _});_

$(".search").keyup(function(){search=$(".search");if(search.val()!= "" ) _{_ $("div").css({"display": "block"}); _}_ else _{_ $("div").css({"display": "none"}); _}_ _});_

_  <input type="search" class="form-control search" name="search" autocomplete="off" >

  <div>

  </div>
_

これは隠すのに役立ちます

0
Jerin Stephen