Jquery 如果在元素外部单击，则切换

在“我的菜单”中，用户单击链接并通过

.addClass（“显示导航”）

显示列表

以下是JS代码：

jQuery(".nav-js-trigger").each(function(){
    this.onclick = function() {

        var hasClass;
        hasClass = jQuery(this).next().hasClass( "show-nav" );

        jQuery('.show-nav').removeClass('show-nav');

        if (hasClass === false) {
            jQuery(this).next().addClass( "show-nav" );
        }

    }
});

问题是：如果用户使用class

show nav

在div的外部单击，我希望删除class

show nav

如何实现这一点？

---

我见过

e.target

div ID而不是class的例子，特别是在这种情况下。

以下是常见的解决方案：

jQuery(".nav-js-trigger").click(function(){
    var hasClass;
    hasClass = jQuery(this).next().hasClass( "show-nav" );

    jQuery('.show-nav').removeClass('show-nav');

    if (hasClass === false) {
        jQuery(this).next().addClass( "show-nav" );
    }
    return false;
});
$('.hidden').click(function(){
   // you probably have something else here, it's a menu right ?
   return false;
});

$(window).click(function(){
    jQuery('.show-nav').removeClass('show-nav');
});

这个想法是

从事件处理程序返回false以防止传播（您应该在大多数事件处理程序中执行此操作）

要处理

窗口上的单击事件，请删除该类

---

此常见模式的一个变体是在显示菜单时在

窗口

上添加绑定，并在关闭菜单时将其删除。如果您不经常显示此菜单，则会更令人满意。

以下是常见的解决方案：

jQuery(".nav-js-trigger").click(function(){
    var hasClass;
    hasClass = jQuery(this).next().hasClass( "show-nav" );

    jQuery('.show-nav').removeClass('show-nav');

    if (hasClass === false) {
        jQuery(this).next().addClass( "show-nav" );
    }
    return false;
});
$('.hidden').click(function(){
   // you probably have something else here, it's a menu right ?
   return false;
});

$(window).click(function(){
    jQuery('.show-nav').removeClass('show-nav');
});

这个想法是

从事件处理程序返回false以防止传播（您应该在大多数事件处理程序中执行此操作）

要处理

窗口上的单击事件，请删除该类

---

此常见模式的一个变体是在显示菜单时在

窗口

上添加绑定，并在关闭菜单时将其删除。如果您不经常显示此菜单，则会更令人满意。

添加此功能将实现以下目的：

jQuery(document).mouseup(function (e) {
    if (!jQuery(".nav-js-trigger").next().is(e.target)) {
        jQuery(".nav-js-trigger").next().removeClass("show-nav");
    }
});

希望这有帮助

---

@dystroy建议的修复方法将删除该类，即使在单击菜单内部。我的答案将允许用户在菜单内单击而不关闭它。

添加此选项将实现以下功能：

jQuery(document).mouseup(function (e) {
    if (!jQuery(".nav-js-trigger").next().is(e.target)) {
        jQuery(".nav-js-trigger").next().removeClass("show-nav");
    }
});

希望这有帮助

---

@dystroy建议的修复方法将删除该类，即使在单击菜单内部。我的回答将允许用户在菜单内单击而不关闭它。

绑定到文档，并检查是否单击了锚定、是否单击了显示元素内的某些内容，或者单击是否在外部

$(document).on('click', function(e) {
    var nav    = $(e.target).closest('.nav-js-trigger');
    var hidden = $(e.target).closest('.show-nav')

    if ( nav.length > 0 ) {
        $('.show-nav').not( nav.next().toggleClass('show-nav') ).removeClass('show-nav');
    } else if ( hidden.length === 0 ) {
        $('.show-nav').removeClass('show-nav');
    }
});

---

绑定到文档，并检查是否单击了锚定、是否单击了显示元素内部的内容，或者单击是否在外部

$(document).on('click', function(e) {
    var nav    = $(e.target).closest('.nav-js-trigger');
    var hidden = $(e.target).closest('.show-nav')

    if ( nav.length > 0 ) {
        $('.show-nav').not( nav.next().toggleClass('show-nav') ).removeClass('show-nav');
    } else if ( hidden.length === 0 ) {
        $('.show-nav').removeClass('show-nav');
    }
});

---

您可以利用

e.target

和

e.currentTarget

来区分您单击的元素和其他元素

e.currentTarget

在以下情况下将是

#菜单

NB：避免在每个

中附加事件处理程序。选择感兴趣的元素并绑定
单击事件处理程序


您可以利用
e.target
和
e.currentTarget
来区分单击的元素和其他元素

e.currentTarget
在以下情况下将是
#菜单

NB：避免在每个
中附加事件处理程序。选择感兴趣的元素并绑定
单击事件处理程序


我的方式-：

我的方式-：

这里有一个将抓住每个元素作为触发器，但不希望单击的元素除外：


//对于所有元素。。。
$（'html'）。单击（函数（）{
$（'.show nav'）.hide（）；//隐藏导航
});
//用于显示导航元素
$（'.show nav'）。单击（函数（e）{
e、 stopPropagation（）；//防止默认的导航关闭操作
警告（'在框内'）；//警告内部单击
});
//如果你点击按钮
$（'.button'）。单击（函数（e）{
e、 stopPropagation（）；//防止默认的导航关闭操作
$（'.show nav'）.show（）；//重新打开nav
});
。显示导航{
背景颜色：浅蓝色；
边框：1px纯黑；
}

你好


重新打开Nav
这里有一个将抓住每个元素作为触发器，但不希望单击的元素除外：


//对于所有元素。。。
$（'html'）。单击（函数（）{
$（'.show nav'）.hide（）；//隐藏导航
});
//用于显示导航元素
$（'.show nav'）。单击（函数（e）{
e、 stopPropagation（）；//防止默认的导航关闭操作
警告（'在框内'）；//警告内部单击
});
//如果你点击按钮
$（'.button'）。单击（函数（e）{
e、 stopPropagation（）；//防止默认的导航关闭操作
$（'.show nav'）.show（）；//重新打开nav
});
。显示导航{
背景颜色：浅蓝色；
边框：1px纯黑；
}

你好


重新打开Nav
尝试jquery的“not”选项：

$('html').not('.show-nav').click(function() {
    // your function here
}

请尝试jquery的“not”选项：

$('html').not('.show-nav').click(function() {
    // your function here
}

如果符合条件，将在2天内奖励50分。如果符合条件，将在2天内奖励50分。有趣。这种点击在触摸屏（手机/平板电脑）上有效吗？另外，性能如何？这不是在听页面上的每一次点击吗…？我想点击黄色区域不应该关闭它。@GaryWoods这真的不重要。即使只花了一毫秒（事实并非如此），也只是点击而已…@GaryWoods-如果不监听文档中任何地方的点击，就真的无法捕获文档中任何地方的点击。没有神奇的“元素未点击”选择器，必须检查每次点击。使用类似于
$（“*：not（.show nav）”）
的东西更糟糕。有趣。这种点击在触摸屏（手机/平板电脑）上有效吗？另外，性能如何？这不是在听页面上的每一次点击吗…？我想点击黄色区域不应该关闭它。@GaryWoods这真的不重要。即使只花了一毫秒（事实并非如此），也只是点击而已…@GaryWoods-如果不监听文档中任何地方的点击，就真的无法捕获文档中任何地方的点击。没有神奇的“元素未点击”选择器，必须检查每次点击。使用类似于
$（“*：not（.show nav）”）
的方法更糟糕。谢谢你的回答。我正试图确定w