电商侧边栏父菜单点击切换子菜单显示的JS问题求助

首先，你的代码失效核心是两个问题：a标签默认跳转打断JS执行，以及移除类的逻辑未覆盖所有子菜单。以下是完整修复方案：

修正后的JavaScript代码 #

$('.woo-main-cat li').on('click', function(e) {
  // 阻止a标签跳转，避免页面刷新中断逻辑
  if ($(e.target).is('a')) {
    e.preventDefault();
  }
  
  // 1. 先关闭所有已展开的子菜单
  $('.sub-cat-menu').removeClass('tako-open');
  
  // 2. 展开当前父分类对应的子菜单
  $(this).children('.sub-cat-menu').addClass('tako-open');
});

如果需要支持点击当前父分类收起子菜单的交互，可使用以下版本：

$('.woo-main-cat li').on('click', function(e) {
  if ($(e.target).is('a')) {
    e.preventDefault();
  }
  
  const currentSubMenu = $(this).children('.sub-cat-menu');
  const isAlreadyOpen = currentSubMenu.hasClass('tako-open');
  
  // 关闭所有子菜单
  $('.sub-cat-menu').removeClass('tako-open');
  
  // 仅当当前子菜单未展开时，才添加展开类
  if (!isAlreadyOpen) {
    currentSubMenu.addClass('tako-open');
  }
});

关键细节说明 #

1. 阻止默认跳转：父分类内的<a>标签会触发页面跳转，导致JS逻辑未执行完成就刷新页面，必须用e.preventDefault()拦截。
2. 全局关闭已展开菜单：先给所有.sub-cat-menu移除tako-open类，再给当前目标添加，确保同一时间只有一个子菜单展开。
3. CSS优化提示：原CSS中height:100%可能导致子菜单高度异常（比如内容高度超过父元素），建议调整为：

.sub-cat-menu {
  background: #fff;
  visibility: hidden;
  height: 0;
  overflow: hidden; /* 隐藏超出内容，保证过渡效果正常 */
  transition: height 0.8s ease-in; /* 明确指定过渡属性 */
}
.tako-open{
  visibility: visible;
  height: auto;
}

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