18

DIV内にドロップダウンメニューがあります。

ユーザーが他の場所をクリックしたときにドロップダウンを非表示にしたい。

$('div').blur(function() { $(this).hide(); }

動かない。

.blurはでのみ機能することを知って<a>いますが、この場合、最も簡単な解決策は何ですか？

4

6 に答える 6

22

divでtabindex属性を使用してみてください。以下を参照してください。

詳細とデモについては、この投稿を確認してください。

于 2011-07-28T13:40:39.203 に答える
16

問題は、divがonfocusoutイベントを発生させないことだと思います。ボディのクリックイベントをキャプチャしてから、ターゲットがメニューdivであるかどうかを確認する必要があります。そうでない場合は、ユーザーが他の場所をクリックしたため、divを非表示にする必要があります。

<head>
  <script>
  $(document).ready(function(){
    $("body").click(function(e) {
      if(e.target.id !== 'menu'){
        $("#menu").hide();
      }      
    });
  });
  </script>
  <style>#menu { display: none; }</style>
</head>

<body>
  <div id="menu_button" onclick="$('#menu').show();">Menu....</div>
  <div id="menu"> <!-- Menu options here --> </div>

  <p>Other stuff</p>
</body>
于 2009-08-11T11:24:57.957 に答える
5 
$("body").click(function (evt) {
     var target = evt.target;
     if(target.id !== 'menuContainer'){
            $(".menu").hide();
    }                
});

divにIDを指定します（例： "menuContainer"）。次に、target.tagNameの代わりにtarget.idでチェックして、その特定のdivを確認できます。

于 2009-08-20T13:32:46.390 に答える
1

最もクリーンな方法ではありませんが、ページ上のすべてのクリックイベントをキャプチャする代わりに、divに空のリンクを追加して、divの「フォーカスプロキシ」として使用できます。

したがって、マークアップは次のように変更されます。

<div><a id="focus_proxy" href="#"></a></div>

Javascriptコードは、リンクのblurイベントにフックする必要があります。

$('div > #focus_proxy').blur(function() { $('div').hide() })

divを表示するときは、リンクにフォーカスを設定することを忘れないでください。

$('div > #focus_proxy').focus()
于 2012-05-17T10:39:59.253 に答える
-1

私はちょうどこの問題に遭遇しました。上記のどれも問題を適切に解決できないと思うので、ここに私の答えを投稿します。これは、上記の回答のいくつかを組み合わせたものです。少なくとも、クリックしたポイントが同じ「id」であるかどうかを確認するだけで遭遇する可能性のある2つの問題を修正しました。

$("body").click(function(e) {
    var x = e.target;

    //check if the clicked point is the trigger
    if($(x).attr("class") == "floatLink"){
        $(".menu").show();
    } 
    //check if the clicked point is the children of the div you want to show 
    else if($(x).closest(".menu").length <= 0){
       $(".menu").hide();
    }
});
于 2012-05-31T12:19:26.390 に答える
-3

.clickは、divタグ内で問題なく機能します。select要素の上にいないことを確認してください。

$('div').click(function(e) {
    var $target = $(e.target);
    if (!$target.is("select")) { $(this).hide() };
});
于 2009-08-11T11:24:04.133 に答える