Javascript 为什么这个.not（）选择器不起作用？

我有一个侧边栏响应菜单，当点击按钮时打开。 该菜单具有下拉子菜单，并使用twitter引导模板

我试图隐藏菜单时，点击任何地方的屏幕上除了菜单按钮和菜单本身

但单击菜单的例外情况不起作用。即使在菜单上单击，它也会隐藏。我认为问题在于.not（）选择器

这里可能出了什么问题

代码是：

CSS

.menu-click
{
    padding: 5px;
    cursor: pointer;
    border: solid 1px #ffcccc;
}

.mobile-menu
{
    top: 50px;
    display: none;
    position: absolute;
    z-index: 999;
    animation-duration:0.5s;
   -o-animation-duration:0.5s;
   -webkit-animation-duration:0.5s;
   -moz-animation-duration:0.5s;
}

JQuery

$(function(){

    $("html").not('.mobile-menu').click(function(){
        $(".mobile-menu").removeClass("animated fadeInLeft").addClass("animated fadeOutLeft")
    });
    $(".menu-click").click(function(event){
        event.stopPropagation();
    });
});

筛选您调用它的匹配元素。您问题中的代码要求的是所有

元素，这些元素不是

.mobile menu

元素

你可能想要这样的东西：

$("ul").not('.mobile-menu').click(...)

---

在评论中讨论后，如果您有一个带有

.mobile menu

的

div

，并且您想检查

.mobile menu

是否不在其上，那么您还需要以另一种方式识别

div

，例如添加一个

.menu

类

<div class="menu">...</div>
<div class="menu mobile-menu">...</div>

不添加

.menu

类并使用

$（'.div'）。不（'.mobile menu'）

将选择页面上没有

.mobile menu

的每个

div

，而不仅仅是您感兴趣的

.div>。
筛选您调用它的匹配元素。您问题中的代码要求的是所有
元素，这些元素不是
.mobile menu
元素

你可能想要这样的东西：

$("ul").not('.mobile-menu').click(...)


在评论中讨论后，如果您有一个带有
.mobile menu
的
div
，并且您想检查
.mobile menu
是否不在其上，那么您还需要以另一种方式识别
div
，例如添加一个
.menu
类

<div class="menu">...</div>
<div class="menu mobile-menu">...</div>

不添加
.menu
类并使用
$（'.div'）。不（'.mobile menu'）
会选择页面上没有
的每个
div
。mobile menu
，而不仅仅是您感兴趣的一个。
或者更好，在您的情况下，使用：Not伪选择器：

$('html:not(.mobile-menu)')...

或

就此而言

如果这不起作用，您可以一直走很长的路，监视整个身体上的单击，然后在处理程序中检查父菜单是否为.mobile menu类：

$('body').click(function(){
    if ($(this).closest('.mobile-menu').length === 0) {
        //do stuff here
    }
})

或者更好，在您的情况下，使用：not伪选择器：

$('html:not(.mobile-menu)')...

或

就此而言

如果这不起作用，您可以一直走很长的路，监视整个身体上的单击，然后在处理程序中检查父菜单是否为.mobile menu类：

$('body').click(function(){
    if ($(this).closest('.mobile-menu').length === 0) {
        //do stuff here
    }
})

但这正是我想要的，即单击“所有非.mobile菜单元素的html元素”隐藏菜单。您选择了“ul”而不是“html”。这里不行！我所说的
html
元素是指
。文档中应该只有其中一个（根节点）。好的，它不应该使用“html”选择器。但是“.mobile menu”也不是
元素。我是否应该尝试“div”选择器，因为“.mobile menu”是一个元素？如果
.mobile menu
位于
div
上，那么是的，您可能想要
$（'div.menu'）。而不是（'.mobile menu'）
。完成！我向包装器类以及.mobile菜单添加了一个菜单类。这很好。但这正是我想要的，也就是说，点击“所有非移动菜单元素的html元素”来隐藏菜单。您选择了“ul”而不是“html”。这里不行！我所说的
html
元素是指
。文档中应该只有其中一个（根节点）。好的，它不应该使用“html”选择器。但是“.mobile menu”也不是
元素。我是否应该尝试“div”选择器，因为“.mobile menu”是一个元素？如果
.mobile menu
位于
div
上，那么是的，您可能想要
$（'div.menu'）。而不是（'.mobile menu'）
。完成！我向包装器类以及.mobile菜单添加了一个菜单类。这很有效。已经尝试过了，问题似乎在于选择要“单击”的正确元素。“html”这里是问题检查我的最新编辑。您是否尝试过侦听正文或文档上的单击？已经尝试过了，问题似乎在于选择要“单击”的正确元素。“html”这里是问题检查我的最新编辑。您是否尝试过在正文或文档上单击？