使用bigSlide插件实现侧边栏时按钮功能仅生效一次如何解决

问题原因 #

• 原有代码仅在点击侧边栏按钮时给body添加了menu-open类，没有编写移除该类的逻辑：无论是点击按钮关闭侧边栏，还是点击空白区域触发easyClose关闭侧边栏，menu-open类都会一直保留在body上，导致遮罩层.site-overlay始终处于显示状态
• 遮罩层的z-index为9998，而菜单按钮没有设置定位和更高的z-index，会被遮罩层完全覆盖，第二次点击按钮时实际点击的是透明遮罩，无法触发按钮的点击事件，因此交互只能生效一次。

修复方案 #

1. 替换原有JS逻辑，使用bigSlide插件内置的打开/关闭回调函数同步处理menu-open类的添加和移除，删掉原来单独绑定的click事件：

$(document).ready(function() {
  $('.menu-link').bigSlide({
    easyClose: true,
    // 侧边栏打开后添加类
    afterOpen: function() {
      $('body').addClass('menu-open');
    },
    // 侧边栏关闭后移除类
    afterClose: function() {
      $('body').removeClass('menu-open');
    }
  });
});

2. 给菜单按钮补充定位和更高的z-index，保证按钮始终在最上层可点击：

a.menu-link {
  float: right;
  padding: 20px;
  position: relative;
  z-index: 9999; /* 高于遮罩层的9998即可 */
}

修改后侧边栏就可以重复正常触发了。

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