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

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

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

对于悬停，您最好使用普通的 CSS :hover 而不是脚本。只有 IE6 无法使用。同样，悬停菜单无论是使用脚本 还是 CSS 都存在相当棘手的可用性和可访问性问题。