如果在div之外单击删除类（目标类）

我有一个菜单，用户点击链接和列表通过.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; } 

  menu 
Hello 

Answer 2

 $(document).on("click", function(e) { if ($(e.target).is(".trigger") === false) { $(".menu").hide(); } });