Javascript 单击外部菜单将其关闭

这是我的函数

$(document).ready(function () {
   $('.a').click(function () {
     var here = $(this).next('.b');
    if (here.is(":visible")) {
        here.hide();
    } else {
        here.show();
    }
    return false;
  });
});

因此，每当我点击按钮，它就会在同一个网页上打开一个小标签&每当我再次点击它，它就会关闭它。但一旦我打开了标签，我就不能仅仅通过点击网页上除了标签之外的某个地方来关闭它。我必须再次单击按钮才能关闭它

---

如何仅通过单击网页上的某个位置和按钮来关闭选项卡？

要检查是否单击了正文：

$("body").click(function(e) {
  if(e.target.id !== 'menu'){
    $("#menu").hide();
  }      
});

菜单

将是菜单的id

---

如果单击了主体，并且单击的div的id与菜单的id不相等，则它将关闭。

要检查是否单击主体：

$("body").click(function(e) {
  if(e.target.id !== 'menu'){
    $("#menu").hide();
  }      
});

菜单

将是菜单的id

---

如果单击了主体，并且单击的div的id不等于菜单的id，则它将关闭。

检查此实现

jQuery（文档）.ready（函数（）{
$（文档）.on（'click'，'body，#btn'，函数（ev）{
ev.stopPropagation（）
如果（ev.target.id==“btn”）{
如果（$（“#模态”）。是（“：可见”）{
$（'模态'）.fadeOut（）；
}否则{
$（'模态'）.fadeIn（）；
}
}否则{
$（'模态'）.fadeOut（）；
}
});
});
html，正文{
身高：100%；
}

点击我！
呜呜呜呜
检查此实现


jQuery（文档）.ready（函数（）{
$（文档）.on（'click'，'body，#btn'，函数（ev）{
ev.stopPropagation（）
如果（ev.target.id==“btn”）{
如果（$（“#模态”）。是（“：可见”）{
$（'模态'）.fadeOut（）；
}否则{
$（'模态'）.fadeIn（）；
}
}否则{
$（'模态'）.fadeOut（）；
}
});
});
html，正文{
身高：100%；
}

点击我！
呜呜呜呜
在单击文档时，检查选项卡是否已单击的最接近帮助：

$(document).click(function (e) {
    if($('.b').is(':visible')&&!$(e.target).closest('.b').length){
       $('.b').hide();
    }
});

单击文档时，最接近的选项有助于检查选项卡是否已单击：

$(document).click(function (e) {
    if($('.b').is(':visible')&&!$(e.target).closest('.b').length){
       $('.b').hide();
    }
});

我几乎在每个项目上都搜索到了这个，所以我制作了这个插件：

jQuery.fn.clickOutside = function(callback){
    var $me = this;
    $(document).mouseup(function(e) {
        if ( !$me.is(e.target) && $me.has(e.target).length === 0 ) {
            callback.apply($me);
        }
    });
};

它接受回调函数并传递原始选择器，因此您可以执行以下操作：

$('[selector]').clickOutside(function(){
    $(this).removeClass('active'); // or `$(this).hide()`, if you must
});

漂亮的、可链接的、优雅的代码。
我几乎在每个项目上都搜索到了这一点，所以我制作了这个插件：

jQuery.fn.clickOutside = function(callback){
    var $me = this;
    $(document).mouseup(function(e) {
        if ( !$me.is(e.target) && $me.has(e.target).length === 0 ) {
            callback.apply($me);
        }
    });
};

它接受回调函数并传递原始选择器，因此您可以执行以下操作：

$('[selector]').clickOutside(function(){
    $(this).removeClass('active'); // or `$(this).hide()`, if you must
});

漂亮、可链接、优雅的代码。
要检查单击的元素是否在给定容器（即菜单）之外，我们只需检查事件目标是否是容器的子级。使用JQuery-

$('body').click(function(e) {

    if ( 0 === $(e.target).parents('#container-id').length ) {

        /// clicked outside -> do action

    }

})

要检查单击的元素是否在给定容器（即菜单）之外，我们只需检查事件目标是否是容器的子对象。使用JQuery-

$('body').click(function(e) {

    if ( 0 === $(e.target).parents('#container-id').length ) {

        /// clicked outside -> do action

    }

})

$（'body'）。单击并隐藏此处的函数您不能使用
.blur（）
？另一个选项是在
正文中保留一个覆盖div（z索引小于菜单的透明div）。现在，无论何时显示菜单，也要显示这个div。向该div添加一个单击处理程序，它将关闭菜单。@未知如何使用.blur（）@FerhatBAŞ如何使用？$（'body'）。单击并隐藏此处的函数您不能使用
.blur（）
？另一个选项是在
主体中保留一个覆盖div（z索引小于菜单的透明div）。现在，无论何时显示菜单，也要显示这个div。向该div添加一个单击处理程序，它将关闭菜单。@未知我如何使用.blur（）@FerhatBAŞ如何操作？它在我单击小选项卡时关闭div，而不是在它外部单击时关闭div？它在我单击小选项卡时关闭div，而不是在它外部单击时关闭div？工作非常好！谢谢你，先生：）太好了！：）要了解更多关于“最接近”的工作原理，请参阅“完美工作”！谢谢你，先生：）太好了！：）要进一步了解“最近”的工作原理，请参阅当您单击菜单本身时，它也会关闭，这是不应该发生的。当您单击菜单本身时，它也会关闭，这是不应该发生的。