移动端侧边导航点击无法关闭：jQuery toggleClass使用问题排查

问题根源 #

• 页面初始化时，.hide-nav-mobile类的元素不存在，你直接给这个类绑定点击事件，jQuery找不到目标元素，导致关闭导航的逻辑完全没生效。
• 三个独立的点击事件存在逻辑冲突：点击.show-nav-mobile时，会同时触发.mobile-nav-toggle的点击事件，类切换后关闭逻辑还是没绑定到元素上。

修复方案 #

把所有逻辑整合到初始就存在的.mobile-nav-toggle元素的点击事件里，通过判断当前类状态来执行对应动画，避免动态类绑定事件失效的问题。

修复后的代码：

jQuery(".mobile-nav-toggle").click(function(){
  var $toggleBtn = jQuery(this);
  // 切换导航按钮的状态类
  $toggleBtn.toggleClass("show-nav-mobile hide-nav-mobile");
  // 根据当前类执行打开/关闭动画
  if($toggleBtn.hasClass("hide-nav-mobile")){
    jQuery(".offcanvasmainnav").animate({left:'-640px' }, 250);
  } else {
    jQuery(".offcanvasmainnav").animate({left:'0px' }, 250);
  }
});

说明 #

• 直接绑定到初始存在的.mobile-nav-toggle，不会出现事件绑定失效的问题。
• 点击时先切换类，再根据类状态执行动画，逻辑连贯，避免了多事件冲突。

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