如果在div之外单击删除类

如果在div之外单击删除类

本文介绍了如果在div之外单击删除类(目标类)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

以下是使用JS代码的:

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

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

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之外单击删除类(目标类)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-21 18:31