如果在 div 之外单击，则删除类（目标类）

Question

我有一个菜单，用户单击链接并通过.addClass( "show-nav" ).

这是带有 JS 代码的jsFiddle：

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如果用户在带有 class 的 div之外单击，我想删除该类show-nav。我该怎么做呢？

我已经看到了e.targetdiv ID 但没有看到类的例子，尤其是这样的场景。

Answer 1

您可以在元素event.stopPropagation()上添加一个侦听器，并在主体上添加另一个侦听器，以在之前未拦截的情况下捕获此事件。

像这样的东西：

$(".show-nav").on("click", function(event){
    event.stopPropagation();
});

$("body").on("click", function(event){
    $(".show-nav").hide(); // or something...
});

为了简化您的用例，这里有一个JSFiddle。

$(".show-nav").on("click", function(event){
    event.stopPropagation();
});

$("body").on("click", function(event){
    $(".show-nav").hide(); // or something...
});

$(".trigger").on("click", function(event)
{
    $(".menu").toggle();
    event.stopPropagation();
});

$(".menu").on("click", function(event)
{
    event.stopPropagation();
});

$(document).on("click", function(event)
{
    $(".menu").hide();
});

.menu
{
    display: none;
    background: yellow;
}