jQuery切换li子元素类失效问题求助（Shopify环境）

问题分析 #

你的jQuery代码失效主要有三个核心问题：

• 点击事件绑定时机错误，在DOM未完全加载时就执行绑定，导致无法关联到目标元素
• 使用find()方法查找子元素，但ul.subLinks是a.lvl-1的同级元素而非子元素，因此无法定位到目标菜单
• 点击a标签会触发默认跳转行为，直接打断下拉交互逻辑

修正后的jQuery代码 #

$(document).ready(function() {
  $('a.site-nav.lvl-1').click(function(e) {
    // 阻止a标签默认跳转，避免页面刷新打断交互
    e.preventDefault();
    // 定位当前点击元素的同级子菜单，切换显示/隐藏类
    $(this).siblings("ul.subLinks").toggleClass('inactive active-drop-down');
  });
});

优化后的CSS代码 #

.inactive {
  display: none;
}

.active-drop-down {
  display: block;
}

关键修改说明 #

1. 事件绑定时机：将点击事件放在$(document).ready()回调内，确保DOM完全渲染后再绑定事件，避免元素未加载导致绑定失败。
2. 元素定位逻辑：用siblings("ul.subLinks")替代find()，因为子菜单是当前点击a标签的同级元素；也可以用$(this).parent().find("ul.subLinks")，效果一致。
3. 阻止默认行为：添加e.preventDefault()，避免点击a标签时触发页面跳转，保证下拉交互正常执行。
4. CSS简化：移除!important，通过切换inactive和active-drop-down类直接控制显示状态，样式优先级更清晰。

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