单击发生时，Jquery 删除活动的类答案

【问题标题】：Jquery remove class active when click happen单击发生时，Jquery 删除活动的类
【发布时间】：2020-08-29 00:30:14
【问题描述】：

我正在使用下一个 html 结构：

<ul class="menu">
    <li class="item">
        <small>Ubicacion</small>
        <a class="item-content" href="#">
        <i class="item-icon fas fa-map-marker-alt"></i><span>Ubicaciones</span>
        <i class="down fas fa-sort-down"></i>
        </a>
        <ul class="sub-menu ubicaciones">
            <li class="sub-item">Ubicacion1</li>
        </ul>
    </li>
</ul>

此代码是下一个侧边栏的一部分

我有这个 Jquery 代码：

$('.menu .item').click(function () {
    $(this).find('.item-content .down').toggleClass('active')
    $(this).find('.sub-menu').toggleClass('active')
})

使用此代码，我只需获取带有向下类的元素，即箭头图标，然后添加活动类以向上旋转箭头。我对带有类子菜单的元素做同样的事情我添加类活动来显示它

我也有这个代码：

$(document).on('click', '.sub-item', function (evemt) {
    event.preventDefault()
    console.log('Hola!')
})

使用此代码，我想获取子项元素内的文本，但是当我单击具有类子项的任何元素时，活动类将从我的元素中删除，子菜单和子菜单被隐藏我不希望这样我尝试使用 preventDefault 但它不起作用

谁能告诉我我的错误是什么？

【问题讨论】：

你在点击事件的jQuery中有错字，应该是事件而不是事件
谢谢！我改了，但我有同样的问题
那么，我想你可能需要在这个函数中再次为它们设置活动类

标签： javascript html jquery

【解决方案1】：

您可以在单个事件处理程序的帮助下做到这一点，如下所示：

$('.menu .item').click(function(event) {
  if ($(event.target).hasClass('sub-item')) {
    console.log('Hola!')
  } else {
    $(this).find('.item-content .down').toggleClass('active')
    $(this).find('.sub-menu').toggleClass('active')
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
  <li class="item">
    <small>Ubicacion</small>
    <a class="item-content" href="#">
      <i class="item-icon fas fa-map-marker-alt"></i><span>Ubicaciones</span>
      <i class="down fas fa-sort-down"></i>
    </a>
    <ul class="sub-menu ubicaciones">
      <li class="sub-item">Ubicacion1</li>
    </ul>
  </li>
</ul>

【讨论】：