Shopify网站汉堡菜单点击切换叉形图标功能失效求助

• hasClass() 参数传值错误：jQuery 内置的 hasClass() 方法仅需传入类名字符串，不需要带类选择器的.前缀，当前写法$('body').hasClass(".show-mobile-nav") 永远返回匹配失败，因为逻辑上是在查找body元素上是否存在类名本身就带一个点的".show-mobile-nav"类，和你实际加的show-mobile-nav类完全匹配不上。
• else 语法错误：JavaScript 语法中else分支后不能直接跟判断条件，带条件的分支需要写为else if()，当前的else($('body').hasClass("")) 属于语法错误，会直接导致整段脚本运行中断，所有后续逻辑完全不生效。
• 缺少事件绑定逻辑：当前代码仅在页面初次加载时执行了一次判断，没有给汉堡菜单的点击元素绑定触发交互的事件，就算修正前面的语法错误，点击按钮时也不会触发状态切换。
• 状态逻辑不闭环：当前分支仅实现了导航激活时隐藏关闭图标的逻辑，没有同步控制两个图标的初始显示状态，极易出现两个图标同时错位显示的问题。

// 等待DOM结构加载完成后再执行脚本
$(document).ready(function() {
  // 绑定汉堡菜单按钮的点击事件，需将下面的选择器替换为你站点实际的菜单按钮类名
  $('.mobile-menu-trigger').on('click', function(event) {
    event.preventDefault();
    // 切换body标签上的移动导航激活类
    $('body').toggleClass('show-mobile-nav');

    // 根据当前状态切换两个图标的显示隐藏
    if ($('body').hasClass('show-mobile-nav')) {
      // 菜单展开状态：隐藏汉堡图标，显示叉形关闭图标
      $('img.open').hide();
      $('img.close').show();
    } else {
      // 菜单收起状态：显示汉堡图标，隐藏叉形关闭图标
      $('img.open').show();
      $('img.close').hide();
    }
  })

  // 页面加载完成后先执行一次状态初始化，避免图标错位
  if ($('body').hasClass('show-mobile-nav')) {
    $('img.open').hide();
    $('img.close').show();
  } else {
    $('img.open').show();
    $('img.close').hide();
  }
})

落地注意事项 #

• 代码中的 .mobile-menu-trigger 是占位选择器，需要替换为你站点上实际的汉堡菜单按钮元素的类名，才能正常绑定点击事件
• 所有 hasClass() 的参数都不要加.前缀，否则会出现永远匹配不到的问题
• 确保引入jQuery的脚本标签放在你这段自定义切换脚本的前面，避免出现jQuery未定义的报错

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