jquery - 如果单击元素外部，则切换

Question

在我的菜单中，用户单击链接，列表将通过 .addClass( "show-nav") 出现。

这里是jsFiddle带有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" );
        }

    }
});

问题是:如果用户点击 show-nav 类的 div 的 外部，我希望删除 show-nav 类。 如何实现这一目标？

我见过 e.target div ID 的示例，但没有见过类，尤其是这样的情况。

Answer 1

这是通常的解决方案:

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');
});

Demonstration

这个想法是

1. 从事件处理程序返回 false 以防止传播(您应该在大多数事件处理程序中执行此操作)
2. 处理窗口上的点击事件以删除类

此常见模式的一个变体是在显示菜单时在 window 上添加绑定(bind)，并在关闭菜单时将其删除。如果您不经常显示此菜单，那就更令人满意了。