首先这是一个小问题,非常小的问题,但是解决起来却不那么容易。网上也没查到“优雅”的方案。

对与次级菜单的实现,我想没有什么比利用css:hover更简洁优雅的了,这也是我一直以来的最爱。不过自从用上全站pjax方案以后,就遇到了一个问题:点击次级菜单切页面内容更新后,之前的鼠标悬停在菜单上的状态并不会改变,必须移开鼠标才行。并且对于移动端这会是一个更显著的问题,因为需要点击其他区域才能消除。

解决方案思考:

1,刷新菜单

这是个最直观的办法,就是让菜单区域页重新加载,不过这有违“局部刷新越局部越好”的原则。并且我的导航栏上还有用于显示音乐播放的动画,因此,这个方案pass。

2,替换CSS:hover方案

这也是比较主流的方案了,就是不使用css:hover,而是用js的click实现菜单的显示与隐藏,那么利用pjax的回调函数可以轻松消除。

然而,我是要用CSS原生hover方案的主,这个也不考率。

3,动态改变CSS

function onPjaxfunction(){
    // pjax开始时 为次级菜单加入hide类名,实现隐藏
    $(".menu ul").addClass("hide");
}

记得更改CSS

.menu ul.hide{display: none;}

然后菜单就消失了,不过你再去hover发现菜单无法显示了,因为内联样式优先级更高。于是:

$(".menu").mouseover(function(){
    $(".menu ul").removeClass("hide");
});

这样就比较完美地解决了上面的问题;事实上,在pjax执行结束时来触发也是可行的。