jQuery hasClass判断失效：父li含active类时显示嵌套ul

首先，先帮你完善一下侧边栏的HTML结构——你提供的代码里没有嵌套的子菜单ul，我先补上一个典型的嵌套结构，方便后续演示：

<div class="sidebar-collapse">
  <ul class="nav" id="main-menu">
    <li>
      <a href="dashboard.php"><i class="fa fa-dashboard"></i> Dashboard</a>
    </li>
    <li>
      <a href="ui-elements.html"><i class="fa fa-desktop"></i> UI Elements</a>
      <!-- 嵌套的子菜单 -->
      <ul class="sub-menu">
        <li><a href="buttons.html">Buttons</a></li>
        <li><a href="forms.html">Forms</a></li>
      </ul>
    </li>
    <li>
      <a href="chart.html"><i class="fa fa-bar-chart-o"></i> Charts</a>
    </li>
  </ul>
</div>

第一步：用CSS默认隐藏子菜单 #

首先要让子菜单默认隐藏，只有父li有active类时才显示，这一步用CSS最直接：

/* 默认隐藏所有子菜单 */
.nav .sub-menu {
  display: none;
  list-style: none;
  padding-left: 20px;
  margin: 0;
}

/* 父li拥有active类时，显示它的子菜单 */
.nav li.active .sub-menu {
  display: block;
}

第二步：排查jQuery hasClass判断不生效的问题 #

你遇到的hasClass判断失效，大概率是这几个原因，对应解决方案如下：

1. 代码执行时机不对 #

如果你的jQuery代码写在DOM加载完成之前（比如放在<head>里没做处理），那时候li元素还没加载，hasClass自然找不到目标。解决方法是把代码放在DOM就绪回调里：

$(function() {
  // 所有jQuery逻辑都放在这里
});

2. 选择器选错了目标 #

比如你误判了<a>标签的hasClass，但active类是加在父<li>上的，一定要确保判断的是li元素：

// 错误示例：判断了a标签的类
if ($('#main-menu li a').hasClass('active')) { ... }

// 正确示例：判断li标签的类
if ($('#main-menu li').hasClass('active')) { ... }

3. 动态添加active类后未触发显示逻辑 #

如果active类是动态添加的（比如根据当前URL匹配添加），要在添加类之后执行显示子菜单的操作，或者直接利用CSS的规则（上面的CSS已经能自动生效）。这里给你一个根据当前URL自动给父li加active的示例：

$(function() {
  // 获取当前页面的URL
  const currentUrl = window.location.href;

  // 遍历所有导航链接，匹配当前URL
  $('#main-menu li a').each(function() {
    const linkHref = $(this).attr('href');
    // 判断当前URL是否包含链接的路径
    if (currentUrl.includes(linkHref)) {
      // 给父li添加active类
      const parentLi = $(this).parent('li');
      parentLi.addClass('active');
      
      // 如果你不用CSS，也可以手动显示子菜单（二选一即可）
      // parentLi.find('.sub-menu').show();
    }
  });

  // 如果你需要手动检查并显示，用这个循环
  $('#main-menu li').each(function() {
    if ($(this).hasClass('active')) {
      $(this).find('.sub-menu').show();
    }
  });
});

4. 点击切换active类的场景 #

如果是点击导航项时添加active类并切换子菜单显示，代码可以这样写：

$(function() {
  $('#main-menu li').on('click', function(e) {
    // 阻止a标签默认跳转（如果需要的话）
    // e.preventDefault();

    // 先移除所有li的active类
    $('#main-menu li').removeClass('active');
    // 给当前点击的li添加active类
    $(this).addClass('active');

    // 隐藏所有子菜单，再显示当前li的子菜单
    $('.sub-menu').hide();
    $(this).find('.sub-menu').show();
  });
});

关键注意点 #

• 优先用CSS控制显示隐藏，比纯JS更高效
• 确保DOM加载完成后再执行jQuery代码
• 检查选择器是否准确，要对应到拥有active类的li元素

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