在jquery上添加和删除类

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

我正在按此代码进行尝试

$(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')
    });


});

$(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')
});

但它不起作用

我的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).ready(function(){

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

---

问题是，对于每次单击

.have\u child

元素，都会触发两个事件处理程序：第一个用于

。have\u child

，第二个用于

body

（作为事件气泡）。当第一个处理程序添加类时，第二个处理程序将立即删除它

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

。。。所以body click的处理程序不会被触发

作为旁注，检查附带的HTML结构真是太好了：将相应的类添加到所有

.have_child

元素中，而不仅仅是单击的元素，这看起来有点奇怪。换句话说，这

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

。。。看起来更合适。下面是一个演示这种方法的示例

---

请注意该演示中的（微小）更改：使用

$（'html'）

而不是

$（'body'）

可以注册对整个文档的单击，不仅仅是在

的维度内，我已经更改了它，但它也不起作用。类没有添加anks，这段代码添加了一个类，但添加后没有删除check，解释它有什么问题（如果有）。谢谢，我在这里使用了这个cod$（“.have_child”）。单击（函数（ev）{$（'.have_child'）。切换类（'sub_more'）；ev.stopPropagation（））$单击（函数（）{$（“.have_child”）.removeClass（'sub_more'）}；它的工作原理和我的wantAh一样，所以你必须“关闭”它打开的活动项。。。正确的方法是切换该类，然后从其余元素中删除该类，如中所示。

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