如何使用jQuery为点击的菜单设置active类？

没问题，我来帮你搞定这个菜单点击激活的需求，结合你给出的嵌套菜单结构，咱们可以分步骤实现：

1. 先整理你提供的菜单结构（格式优化后） #

<!-- MASTER -->
<li class="">
  <a href="#" title="Master">
    <i class="fa fa-lg fa-fw fa-desktop txt-color-blue"></i> 
    <span class="menu-item-parent txt-color-blue">Master</span>
  </a>
  <ul>
    <li class="">
      <a href="" title="Master">
        <i class="fa fa-check-square txt-color-blue"></i>
        <span class="menu-item-parent">SubMaster1</span>
      </a>
    </li>
    <li class="">
      <a href="<?php echo base_url()?>auth/index" title="Master">
        <i class="fa fa-check-square txt-color-blue"></i>
        <span class="menu-item-parent">SubMaster2</span>
      </a>
    </li>
    <li class="">
      <a href="<?php echo base_url()?>auth/index" title="Master">
        <i class="fa fa-check-square txt-color-blue"></i>
        <span class="menu-item-parent">SubMaster3</span>
      </a>
    </li>
  </ul>
</li>

2. jQuery实现方案 #

基础版：点击菜单项仅给当前li添加激活类

这个方案适合只需要当前点击的菜单高亮的场景：

// 确保DOM加载完成后执行
$(document).ready(function() {
  // 给所有菜单链接绑定点击事件
  $('.menu-item-parent').closest('a').on('click', function(e) {
    // 阻止默认跳转（如果需要保留页面跳转，可删除此行）
    e.preventDefault();
    
    // 移除所有菜单li的active类，避免多个激活状态
    $('li.active').removeClass('active');
    
    // 给当前点击项的父级li添加active类
    $(this).closest('li').addClass('active');
  });
});

进阶版：点击子菜单时同时激活父级主菜单

如果需要子菜单被点击时，父级的主菜单也保持高亮，可以用这个版本：

$(document).ready(function() {
  $('.menu-item-parent').closest('a').on('click', function(e) {
    e.preventDefault();
    
    // 清空所有激活状态
    $('li.active').removeClass('active');
    
    // 标记当前点击的菜单为激活
    const currentLi = $(this).closest('li');
    currentLi.addClass('active');
    
    // 如果当前是子菜单，找到父级主菜单并标记激活
    const parentMainLi = currentLi.parents('li').first();
    if (parentMainLi.length) {
      parentMainLi.addClass('active');
    }
  });
});

3. 额外补充 #

• 动态菜单适配：如果你的菜单是通过AJAX动态加载的，要改用事件委托来绑定事件，避免绑定失效：

$(document).on('click', '.menu-item-parent', function(e) {
  // 这里放和上面一样的逻辑代码即可
});

• 自定义激活样式：别忘了给active类写CSS样式，才能看到高亮效果，比如：

li.active {
  background-color: #e9ecef;
  border-left: 3px solid #007bff;
}
li.active .menu-item-parent {
  color: #007bff !important;
}

内容的提问来源于stack exchange，提问作者just R