如果在div之外单击删除类（目标类） [英] Removing class if click outside of div (targetting class)

问题描述

我有一个菜单，用户点击链接和列表通过 .addClass（show-nav）显示。

I have a menu where user clicks on link and list appears via .addClass( "show-nav" ).

以下是使用JS代码的 jsFiddle ：

Here is jsFiddle with JS code:

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 如果用户使用类 show-nav 点击div的外部。 我该怎么做？

I want to remove the class show-nav if the user clicks outside of the div with class show-nav. How do I do this?

我见过的例子e.target div ID但不是类，特别是不是这样的场景。

I have seen examples of e.target div ID but not class, particularly not a scenario like this.

推荐答案

您可以使用<$ c为元素添加一个监听器$ c> event.stopPropagation（）在它上面，以及身体的另一个监听器，如果之前没有被拦截就捕获这个事件。

You can add an listener to the element with an event.stopPropagation() on it, and another listener to the body, to capture this event if not intercepted before.

Something像这样：

Something like this:

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

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

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

To simplify your use-case, here is a 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>

这篇关于如果在div之外单击删除类（目标类）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！