shaperssurf.com超级菜单顶层链接左键点击失效，右键正常求助

核心问题 #

shaperssurf.com的超级菜单顶层链接左键点击无跳转，右键可正常访问，本质是左键点击事件被JS拦截，仅触发子菜单折叠/展开逻辑，未执行链接跳转。对比正常站点shapers.com.au的代码，差异在于故障站点的<a>标签多了data-collapsible、aria-controls、aria-expanded三个属性，这些属性是折叠面板的交互标识，导致JS优先处理子菜单展开而非链接跳转。

解决方案 #

1. 移除冗余折叠属性（快速修复）

直接删除<a>标签上的data-collapsible、aria-controls、aria-expanded属性，保留aria-label保障无障碍兼容，让链接回归原生跳转行为：

<a class="navPage-subMenu-action navPages-action navPages-action-depth-max has-subMenu" href="https://shaperssurf.com/longboard/" aria-label="Longboard Fins">
    <span>Longboard Fins</span><i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down"></use></svg></i>
</a>

2. 修复JS事件逻辑（保留子菜单交互+跳转）

如果需要同时支持“点击箭头展开子菜单、点击文字跳转”的交互，修改菜单绑定的JS代码：

// 找到绑定折叠面板的事件监听函数，添加跳转判断
document.querySelectorAll('[data-collapsible]').forEach(el => {
  el.addEventListener('click', function(e) {
    // 原有子菜单展开/收起逻辑
    toggleCollapsible(this.dataset.collapsible);
    // 点击文字区域时执行跳转
    if (e.target.tagName === 'SPAN') {
      window.location.href = this.href;
    }
  });
});

3. 检查主题后台配置

由于两站使用相同主题，大概率是故障站点的菜单配置有误：

• 进入后台菜单管理页面，检查顶层菜单的类型设置：是否误将“链接项”设为“折叠面板触发项”
• 确认菜单项的“跳转链接”是否正确绑定，且未勾选“仅展开子菜单，不执行跳转”的隐藏选项

4. 排查插件冲突

若禁用部分JS无效，尝试完全禁用所有第三方插件（仅保留主题自带JS），再逐个启用排查：

• 部分SEO、页面优化类插件可能篡改菜单DOM结构或事件绑定
• 检查站点自定义代码区域，是否有覆盖菜单默认行为的JS片段

验证方式 #

修改后刷新页面：

• 若左键点击直接跳转，说明修复成功
• 若需区分交互，点击文字跳转、点击箭头展开子菜单，则符合预期

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