我有一个菜单,用户单击链接并通过 .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 的示例,但没有见过类,尤其是这样的场景。
最佳答案
您可以向带有 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>
关于javascript - 如果单击 div 外部(目标类),则删除类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30402170/