基于JavaScript的Hover展开/折叠侧边栏路由状态异常问题

核心思路 #

页面加载时，先检测鼠标是否正悬停在侧边栏元素上，据此修正初始的mini状态，确保状态与实际鼠标位置匹配，避免后续事件逻辑混乱。

具体实现步骤 #

1. 页面加载时检测鼠标悬停状态
   在DOM加载完成后，用jQuery判断侧边栏是否处于被hover的状态，同步更新状态变量与UI：

   $(document).ready(function() {
       const $sidebar = $('.sidebar');
       let mini = true; // 默认折叠状态
   
       // 页面加载时检查鼠标是否在侧边栏上
       if ($sidebar.is(':hover')) {
           mini = false;
           $sidebar.removeClass('mini').addClass('expanded');
       } else {
           $sidebar.addClass('mini').removeClass('expanded');
       }
   
       // 绑定鼠标移入事件
       $sidebar.on('mouseover', function() {
           if (mini) {
               mini = false;
               $sidebar.removeClass('mini').addClass('expanded');
           }
       });
   
       // 绑定鼠标移出事件
       $sidebar.on('mouseout', function() {
           if (!mini) {
               mini = true;
               $sidebar.addClass('mini').removeClass('expanded');
           }
       });
   });
   

2. 优化事件逻辑（可选）
   若侧边栏包含子元素，mouseout可能因事件冒泡误触发，改用mouseenter和mouseleave更稳定：

   // 替换mouseover/mouseout为mouseenter/mouseleave
   $sidebar.on('mouseenter', function() {
       if (mini) {
           mini = false;
           $sidebar.removeClass('mini').addClass('expanded');
       }
   });
   
   $sidebar.on('mouseleave', function() {
       if (!mini) {
           mini = true;
           $sidebar.addClass('mini').removeClass('expanded');
       }
   });
   

3. CSS状态同步
   确保CSS中状态类对应正确样式：

   .sidebar {
       transition: width 0.3s ease;
       /* 侧边栏基础样式 */
   }
   .sidebar.mini {
       width: 60px;
       /* 折叠状态样式 */
   }
   .sidebar.expanded {
       width: 200px;
       /* 展开状态样式 */
   }
   

原理说明 #

页面跳转后，浏览器不会保留之前的鼠标悬停状态，新页面默认mini=true但鼠标可能仍在侧边栏区域。通过加载时的hover检测，让mini状态与实际鼠标位置对齐，后续鼠标事件就能按预期逻辑执行，不会出现功能反转。

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