点击后删除活动类

Question

我想点击元素时删除class="active"。我有found我们可以这样做：

$('#menu li').on('click', function(){
        $("#menu").hide();
        $("#menu-icon").removeClass("active");
    });

所以我的结构：

我试过这段代码：

$('.nav side-menu li').on('click', function(){
        $(".nav side-menu li").removeClass("active");
});

但没有任何反应，我做错了什么？

[编辑]我认为问题来自于选择HTML元素的方式 这就是菜单的HTML：

<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
 <div class="menu_section">
  <h3>General</h3>
   <ul class="nav side-menu">
    <li><a><i class="fa fa-desktop"></i> Docker machines <span class="fa fa-chevron-down"></span></a>
    <ul class="nav child_menu">
    <li><a class="itemsMenu" href="/">All Docker machines</a></li>
    </ul>
    </li>
    <li><a><i class="fa fa-table"></i> Docker containers <span class="fa fa-chevron-down"></span></a>
    <ul class="nav child_menu">
    <li><a class="itemsMenu" href="/">All containers</a></li>
    </ul>
   </li>
    <li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
   <ul class="nav child_menu">
   <li><a class="itemsMenu" href="/dataGraph">Grafana monitoring</a>         </li>
   </ul>
   </li>
 </ul>
</div>

                        

我正在使用Meteor

Answer 1

您的选择器无法按预期工作，您需要将它们组合在一起，尽管使用this来引用所单击的元素。

$('.nav.side-menu li').on('click', function(){
   $(this)
     .removeClass("active")
     // get the nested children and hide
     .find('ul') 
     .hide();
});

Answer 2

$('.nav.side-menu li').each(function(){
  $(this).on('click', function(){
    $(this).removeClass('active');
  });
});

$（＆＃39; .nav.side-menu li＆＃39;）返回一系列列表元素。如果你在点击功能中选择它，你再次有一个数组，它不起作用