按钮实现菜单切换异常排查：点击切换功能不符合预期

首先，你的代码核心问题出在jQuery版本兼容上：你使用的是jQuery 2.1.1，而jQuery从1.9版本开始就移除了.toggle()方法绑定两个交替执行回调函数的用法（这个用法原本是用来实现点击交替触发不同逻辑的），现在的.toggle()只能用来切换元素的显示/隐藏状态，所以你的toggle函数完全没按照预期执行。

另外还有个小细节错误：$('.content-wrapper').css('margin-left', '225');这里缺少了单位px，会导致样式不生效。同时你的按钮初始样式是style="display: none;"，页面加载后按钮是隐藏的，得去掉这个样式才能点击触发逻辑哦。

下面给你两种修复方案：

方案一：使用click事件+状态变量实现交替逻辑 #

我们自己维护一个状态变量，每次点击时切换状态，根据状态执行不同的逻辑：

$(document).ready(function() {
  let isSidebarVisible = true; // 初始状态：侧边栏可见
  $('#menuToggler').click(function() {
    if (isSidebarVisible) {
      // 隐藏侧边栏的逻辑
      $('#sidebar').css('display', 'none');
      $('#top-menu').css('left', '0');
      $('.content-wrapper').css({
        'width': '100%',
        'margin-left': '0'
      });
      $('#navbar-icon').removeClass().addClass('fa fa-bars');
    } else {
      // 显示侧边栏的逻辑
      $('#sidebar').css('display', 'block');
      $('#top-menu').css('left', '224px');
      $('.content-wrapper').css({
        'width': 'calc(100% - 225px)',
        'margin-left': '225px' // 补上px单位
      });
      $('#navbar-icon').removeClass().addClass('fa fa-arrow-left');
    }
    isSidebarVisible = !isSidebarVisible; // 切换状态
  });
});

方案二：使用CSS类切换（更推荐） #

把样式逻辑全部放到CSS类里，脚本只负责切换类，这样代码更清晰，便于维护：

首先添加CSS样式： #

/* 侧边栏隐藏时的全局样式 */
.sidebar-hidden #sidebar {
  display: none;
}
.sidebar-hidden #top-menu {
  left: 0 !important;
}
.sidebar-hidden .content-wrapper {
  width: 100% !important;
  margin-left: 0 !important;
}

然后修改JS代码： #

$(document).ready(function() {
  $('#menuToggler').click(function() {
    $('body').toggleClass('sidebar-hidden'); // 切换全局类控制布局
    $('#navbar-icon').toggleClass('fa-arrow-left fa-bars'); // 直接切换图标类
  });
});

这样做的好处是把样式和脚本逻辑分离，后续调整样式只需要修改CSS，不需要改动JS代码，更符合前端开发的最佳实践。

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