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标记），它不能来自#theDiv，因为e.stopPropagation阻止了它。冒泡非常有用，因此只对没有子节点的元素（不是容器）使用stopPropagation。像链接，图像和按钮之类的东西。

关闭div，同时点击div之外的任何地方

4 个答案: