问题描述
我有一个菜单,用户点击链接和列表通过 .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之外单击删除类(目标类)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!