44

我有一个显示的浮动 div，我希望在用户单击该 div 时隐藏它。这类似于悬停在元素上时的 .hover() 函数回调。只有我想为点击执行此操作。

我尝试为正文设置一个单击事件，这将隐藏 div，但这会产生意想不到的结果。

有人对我如何轻松做到这一点有想法吗？

4

15 回答 15

86

如果要在单击页面中的其他位置时清除 div，可以执行以下操作：

$('body').click(function(event) {
    if (!$(event.target).closest('#myDiv').length) {
        $('#myDiv').hide();
    };
});
于 2009-09-14T20:25:47.613 回答
19

另一个可能更简单的选项是在浮动 DIV 和页面的其余部分之间添加一个透明 div。

透明 DIV 上的简单单击事件可以处理隐藏，它可以避免您在单击事件中遇到的问题。

于 2009-09-14T20:40:00.610 回答
11

如果您使用的是 Jquery，则可以使用如下选择器：

$("*:not(#myDiv)").live("click", function(){
    $("#myDiv").hide();
});
于 2010-04-06T21:10:48.503 回答
10

您肯定在寻找模糊事件吗？

于 2009-09-14T20:43:19.323 回答
9

最好的方法是：-

    
$(document).bind('click', function(e) {  

 var $clicked = $(e.target);

    if (!$clicked.parents().hasClass("divtohide")) {
        $(".divtohide").hide();
    }

});
于 2010-11-03T13:18:37.973 回答
2

这对我有用，

var mouseOver = false;
$("#divToHide").mouseover(function(){mouseOver=true;});
$("#divToHide").mouseout(function(){mouseOver=false;});
$("body").click(function(){
      if(mouseOver == false) {
           $("#divToHide").hide();
      }
});
于 2012-08-01T13:22:55.740 回答
1

例如，您单击链接元素以显示 div 菜单，您只需将模糊功能绑定到链接元素以隐藏 div 菜单

$('a#displaymenu').click(function(){
   $("#divName").toggle();
}).blur(function() {$("#divName").hide()})
于 2011-10-17T10:34:40.637 回答
1

这是一个处理点击事件的函数，我将弹出窗口的选择器和 jquery 元素提供给它。可能更好地用作 jquery 插件，但这很简单。

clickOut = function(selector, element) {
 var hide = function(event) {
  // Hide search options if clicked out
  if (!$(event.originalEvent.target).parents(selector).size())
   $(element).hide();
  else
   $(document).one("click",hide);
 };

 $(document).one("click", hide);
};

所以如果你有一个弹出元素，<div class='popup'>test</div>你可以使用我的函数，比如clickOut("div.popup", $("div.popup"));

于 2010-10-05T16:01:14.467 回答
1 
     $('body').click(function (event) {        
if ($("#divID").is(':visible')) {
            $('#divID').slideUp();
        }
});

这可用于检查 div 是否可见，如果可见，它将向上滑动对象。

于 2014-08-26T11:28:17.037 回答
0

Here's a full-fledged event-driven approach

  • Custom events handle the "summoning" and "dismissing" of the layer as to not step on the toes of other click-based events
  • document.body listens to for a dismiss event only when the layer in question is actually visible

Zee code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(function()
{
  var $layer = $('#layer');
  var $body  = $('html');

  $layer
    .bind( 'summon', function( e )
    {
      $layer.show();
      $body.bind( 'click', dismissLayer );
    } )
    .bind( 'dismiss', function( e )
    {
      $layer.hide();
      $body.unbind( 'click', dismissLayer );
    } )
    .click( function( e )
    {
      e.stopPropagation();
    })
    .trigger( 'dismiss' )
  ;

  function dismissLayer( e )
  {
    $layer.trigger( 'dismiss' );
  }

  // This is optional - this just triggers the div to 'visible'
  $('#control').click( function( e )
  {
    var $layer = $('#layer:hidden');
    if ( $layer.length )
    {
      $layer.trigger( 'summon' );
      e.stopPropagation();
    }
  } );
});

</script>

<style type="text/css">
#layer {
  position: absolute;
  left: 100px;
  top: 20px;
  background-color: red;
  padding: 10px;
  color: white;
}
#control {
  cursor: pointer;
}
</style>

</head>
<body>

<div id="layer">test</div>
<span id="control">Show div</span>

</body>
</html>

It's a lot of code I know, but here just to show a different approach.

于 2009-09-14T21:25:07.847 回答
0

如果您不想隐藏将通过单击自身显示的元素：

var div_active, the_div;

the_div = $("#the-div");
div_active = false;

$("#show-the-div-button").click(function() {
  if (div_active) {
    the_div.fadeOut(function(){
      div_active = false;
    });
  } else {
    the_div.fadeIn(function(){
      div_active = true;
    });
  }
});

$("body").click(function() {
  if div_active {
    the_div.fadeOut();
    div_active = false;
  }
});

the_div.click(function() {
  return false;
});
于 2011-05-16T05:00:28.577 回答
0

你可以试试这个。 http://benalman.com/projects/jquery-clickoutside-plugin/

于 2010-03-01T22:17:05.413 回答
0

我在论坛中找到了解决方案......但我找不到它来感谢原始作者。这是版本（修改在我的代码中）。

 $(document).bind('mousedown.yourstuff', function(e) {
            var clicked=$(e.target); // get the element clicked                 
            if( clicked.is('#yourstuff')
                 || clicked.parents().is('#yourstuff')) {
                // click safe!
            } else {
                // outside click
                closeIt();
            }
        });

 function closeIt() {
        $(document).unbind('mousedown.emailSignin');
        //...
}

我还有 ESC 键位绑定和上图中未显示的“关闭”html 锚点。

于 2011-01-08T06:03:41.337 回答
0

在文档上使用事件处理程序对我来说效果很好：

函数弹出（元素）
{
    element.onmousedown = function (event) { event.stopPropagation(); };
    document.onmousedown = function () { popDown( element ); };

    document.body.appendChild( 元素 );
}

函数弹出（元素）
{
    document.body.removeChild( 元素 );

    文档.onmousedown = null;
}
于 2010-06-09T05:39:38.707 回答
-2

您将需要监视mouseDown整个页面的事件，但是当用户在浮动 div 内单击时，您必须注意。

我建议向您的浮动 div 添加一个悬停事件，这样当用户悬停在它上面时，mouseDown会被忽略，但是当它没有悬停时mouseDown会关闭它

于 2009-09-14T20:27:28.560 回答