javascript - 如果单击 div 外部(目标类)，则删除类

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

您可以向带有 event.stopPropagation() 的元素添加一个监听器，并向主体添加另一个监听器，以捕获此事件(如果之前未拦截过)。

类似这样的事情:

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

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

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

$(".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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" class="trigger">menu</a>
<div class="menu">Hello</div>