移动端HTML子菜单无法展开，点击图标跳转父菜单链接求助

看起来你遇到的问题主要是事件绑定目标错误和事件冒泡导致的意外跳转，咱们一步步来修复：

问题分析 #

1. 你的JS代码绑定了.sub-menu >a的点击事件，但你的HTML里根本没有sub-menu这个类——子菜单的类是sub-nav，而且你要触发子菜单展开的是那个移动端可见的<i class="ion-ios-plus-empty visible-xs">图标，不是链接本身。
2. 点击图标时跳转到父链接，是因为点击事件冒泡到了父级的<a>标签，触发了它的跳转行为。

修复后的代码 #

修改JavaScript代码

// 绑定到移动端的加号图标上
$('.ion-ios-plus-empty.visible-xs').on('click', function(e) {
  // 阻止事件冒泡，避免触发父级a标签的跳转
  e.stopPropagation();
  // 只在移动端生效
  if ($(window).width() <= 767) {
    // 获取当前图标所在的父li元素
    const parentLi = $(this).closest('li');
    // 获取对应的子菜单
    const subNav = parentLi.find('.sub-nav');
    
    // 切换子菜单的展开/收起状态
    subNav.slideToggle('normal');
    // 切换父li的active类（如果需要样式标识）
    parentLi.toggleClass('on');
    
    // 收起其他已经展开的子菜单（可选，避免多个子菜单同时展开）
    $('.navigation li').not(parentLi).removeClass('on').find('.sub-nav').slideUp('normal');
  }
});

// 确保点击父菜单的链接时正常跳转
$('.navigation li > span > a').on('click', function() {
  // 默认跳转行为保留，这里不需要额外处理，除非有特殊需求
});

关键说明 #

• 事件绑定目标修正：把事件绑定到你用来触发展开的图标上（.ion-ios-plus-empty.visible-xs），替代原来错误的选择器。
• 阻止事件冒泡：用e.stopPropagation()阻止点击图标时的事件向上冒泡到父级的<a>标签，避免意外触发跳转。
• 简化展开逻辑：用slideToggle替代手动判断is(':hidden')，代码更简洁，自动处理展开/收起状态。
• 可选的互斥展开：添加了收起其他子菜单的逻辑，避免页面上同时展开多个子菜单，提升移动端体验（如果不需要可以删掉这行）。

额外样式提示（可选） #

如果需要用图标状态标识菜单展开/收起，可以给.on类加对应样式：

.navigation li.on .ion-ios-plus-empty.visible-xs {
  /* 旋转图标变成减号 */
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

这样修改后，点击移动端的加号图标会展开/收起子菜单，直接点击父菜单的文字链接会正常跳转到who-we-are.html，完美满足你的需求~

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