jquery悬停菜单和后退按钮

Question

我有这段代码，但是当我单击浏览器中的后退按钮时，菜单仍然可见，并且它的类仍然是“显示”

$("#courses > a,#masterclasses > a,#the-team > a").click(function (e) {                                                            
    e.preventDefault();
});
$('#courses > a,#courses-nav').hover(function(){
    $('#courses-nav').addClass('show');
    $('#courses > a').css('color','#43b2b0');
},function(){
    $('#courses-nav').removeClass('show');
    if ($('body').hasClass('courses')) {
        $('#courses > a').css('color','#43b2b0');
        }
        else {
        $('#courses > a').css('color','#000');
    }
}); 

我尝试添加这个... $('#courses-nav,#masterclasses-nav,#the-team-nav').removeClass('show'); ...但这并不能解决问题。

感谢您为解决此问题提供的任何帮助。

C

Answer 1

是的，当您使用后退和前进按钮时，当今的浏览器实际上不会重新加载页面。相反，他们保留旧页面，在离开时将其隐藏，并在重新进入页面时重新显示。这会带来更快的后退/前进导航，并且意味着当您返回时页面将处于与离开时完全相同的状态。 关于 Firefox 中的 bfcache。

您可以捕获 pageshow 事件并使用它来取消中间操作，而无需完全破坏 bfcache（通常通过添加 unload 事件处理程序来完成）。

对于悬停，您可能最好使用普通的 CSS :hover 而不是脚本。只有 IE6 不支持此功能。再次强调，无论是使用脚本还是 CSS，悬停菜单都存在相当棘手的可用性和可访问性问题。