在div以外的任何地方单击时关闭div

Question

我正在尝试创建一个jquery导航栏。 因此，当我单击div main时，新的div将向下滑动，如果我们单击新打开的窗口之外的任何位置，我想添加一个选项来关闭窗口。 这是我使用过的代码，但是没有用。

当我单击新打开的div外部的任何地方时，它都不会关闭。

var $s = $("#main");    
$(document).ready(function () 
{
  $(document.body).click(function()
  {
   $('ul.the_menu').slideToggle('medium');
   if (!$s.has(this).length) 
   {
      $s.hide();
   }    
 });
});

Answer 1

您的意思是：

if(!$(event.target).is('#main')) {
   // your code to close the div
}

Answer 2

您可以通过将事件附加到页面的“正文”来完成此操作，这是最简单的方法。

    $("body").click(function () {
        ....
    });

您正在尝试使用javascript dom引用，在该引用中需要使用jquery选择器来应用jquery事件。

Answer 3

我看到这个问题至少每周问一次。 我通常会避免这种情况，但这取决于您的逻辑和标记。

$menu.focusout(function(){ 
    $(this).slideUp(); 
})

Answer 4

var $_theDiv = $('#the_div')

$_theDiv.click(function(e){
    e.stopPropagation();
} );
// stops the event from bubbling up to the body.

$(document).click(function(){ $_theDiv.hide(); });
//Now any time a click event bubbles to the top of the document, you know it wasn't #theDiv

我将通过一个基本的例子来了解总体思路。 我们显示#theDiv。 现在，如果我们单击除#theDiv以外的任何位置，我们希望它消失。 因此，我们在事件对象上使用stopPropagation。 通常，当您单击时，单击也会上升到父级以及该父级的父级，并且一直持续到您单击文档为止。 这称为“事件冒泡”。 由于我们停止了冒泡，因此我们知道是否有点击到达文档（HTML标记），因为e.stopPropagation阻止了它，所以它不可能来自#theDiv。 冒泡非常有用，因此请仅对没有子元素（没有容器）的元素使用stopPropagation。 诸如链接，图像和按钮之类的东西。