jQuery子菜单鼠标悬停异常求助：浏览器回退后子菜单仍展开

问题重现 #

使用jQuery实现鼠标悬停时子菜单淡入淡出效果，点击子菜单跳转页面后，通过浏览器返回按钮回到原页面，子菜单仍处于展开状态，仅当鼠标移动到页面任意位置时才会关闭。

原初始代码：

(function($) {
    $('.menu-item-has-children').hover(  
        function() {    
            $('.sub-menu', this).stop().fadeToggle(400);  
        },
    );         
})( jQuery );

修改后的代码（解决了hover逻辑反转，但未解决后退状态问题）：

$('.menu-item-has-children').hover(  
    function() {
        $('.sub-menu', this).stop().fadeToggle(400);
    },
    function() {
        $('.sub-menu', this).stop().fadeToggle(400);
    }
);

问题原因 #

浏览器的**后退缓存（bfcache）**会保留页面跳转前的DOM状态，包括子菜单的显示/隐藏状态。返回页面时，浏览器直接从缓存恢复页面，不会重新执行常规的页面加载逻辑，导致子菜单维持跳转前的展开状态。

解决方案 #

通过监听页面显示事件，强制重置子菜单状态，确保页面（包括从缓存加载时）初始化时所有子菜单处于关闭状态，同时明确悬停时的显示/隐藏动作，避免状态混乱：

(function($) {
    // 重置子菜单为关闭状态
    function resetSubmenus() {
        $('.menu-item-has-children .sub-menu').stop().hide();
    }

    // 页面首次加载时执行重置
    $(document).ready(resetSubmenus);
    // 页面从缓存加载时（后退操作）执行重置
    $(window).on('pageshow', resetSubmenus);

    // 悬停逻辑：明确mouseenter显示、mouseleave隐藏
    $('.menu-item-has-children').hover(
        function() {
            $('.sub-menu', this).stop().fadeIn(400);
        },
        function() {
            $('.sub-menu', this).stop().fadeOut(400);
        }
    );
})(jQuery);

关键优化说明 #

1. 替换fadeToggle为fadeIn/fadeOut：明确鼠标进入和离开时的动作，避免因缓存状态导致的逻辑反转。
2. 监听pageshow事件：覆盖浏览器从缓存加载页面的场景，确保每次页面显示时子菜单都被重置为关闭状态。
3. 保留stop()：终止未完成的动画，避免多次快速悬停导致的动画队列堆积问题。

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