Question

我试图通过点击特定区域来添加一个类，然后当我点击身体的任何地方时，这个添加的类将被删除。

我正在尝试使用此代码

$(document).ready(function(){

$("ul#nav .have_child").removeClass('sub_more');

    $(".have_child").click(function(){
            $(".have_child").addClass('sub_more')
    });
    $("body").click(function(){
            $(".have_child").removeClass('sub_more')
    });


});

但它不起作用。

我的HTML代码是

<ul id="nav">   
<li class="have_child sub_more">More<i class="fa fa-angle-down"></i>
    <ul class="sub-menu">
        <li><a href="actualpost.html">actualpost</a></li>
    </ul>
</li>

我已使用此代码

创建了解决方案

$(document).(function(){
$("ul#nav .have_child").removeClass('sub_more');

$(".have_child").click(function (ev) {
    $('.have_child').toggleClass('sub_more');
    ev.stopPropagation();
});

$("html").click(function () {
    $(".have_child").removeClass('sub_more')
});

}）;

Answer 1

将“文档”替换为 document ，这不是字符串

 $(document).ready(function(){

  ^         ^-----------

Answer 2

问题是，对于.have_child个元素的每次点击，都会触发两个事件处理程序：第一个用于.have_child，第二个用于body（作为事件）气泡）。当第一个处理程序添加类时，第二个处理程序将在之后立即删除它。

一个明显的解决方案是在第一个（更深层次的）处理程序中禁用事件传播：

$(".have_child").click(function(ev){
  $(".have_child").addClass('sub_more');
  ev.stopPropagation();
});

...所以点击身体的处理程序不会被解雇。

作为旁注，检查随附的HTML结构真的很棒：将相应的类添加到所有 .have_child元素看起来有点奇怪，而不是单击的那个。换句话说，这......

$(".have_child").click(function(ev){
  $('.have_child').removeClass('sub_more');
  $(this).addClass('sub_more'); 
  ev.stopPropagation();
});

......似乎更合适。这里有一个JS Fiddle来展示这种方法。

请注意该演示中的（次要）更改：使用$('html')代替$('body')可以注册整个文档的点击次数，而不仅仅是<body>的维度。

在jquery上添加和删除类

2 个答案: