拍拍尘土

大家可以看到，js代码还是存在效率问题的。

先贴出原js代码吧：

function menuFix() {
        var sfEls = document.getElementById("nav").getElementsByTagName("li");
        for (var i=0; i<sfEls.length; i++) {
               sfEls[i].onmouseover=function() {
               this.className+=(this.className.length>0? " ": "") + "sfhover";
               }
               sfEls[i].onMouseDown=function() {
               this.className+=(this.className.length>0? " ": "") + "sfhover";
               }
               sfEls[i].onMouseUp=function() {
               this.className+=(this.className.length>0? " ": "") + "sfhover";
               }
               sfEls[i].onmouseout=function() {
               this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
               }
        }
}
window.onload=menuFix;

下面是修改过后的js代码：

function menuFix() {
        var sfEls = document.getElementById("nav").getElementsByTagName("li");
        for (var i=0; i<sfEls.length; i++) {
               sfEls[i].onmouseover=function() {
               this.tmpclass = this.className;
               this.className+=" sfhover";
               }
               sfEls[i].onmouseout=function() {
               this.className = this.tmpclass;
               }
        }
}
window.onload=menuFix;

说说原先的js代码存在的问题吧

1、onmousedown和onmouseup

　　这两个事件的意思大家可以从字面上看出来，鼠标键（不分左右键）按下和鼠标键（不分左右键）弹起，我们要使用的是鼠标移到导航链接就出现下拉菜单，移出下拉菜单消失。所以onmousedown和onmouseup这两个事件我们是用不到的，可以删除。

2、就是使用了正则表达式和这一段代码“this.className+=(this.className.length>0? " ": "") + "sfhover"; 　”

　　正则表达式中使用了分组，这样每次匹配后，都会把数据存在一个特殊的地方用于引用，但我们这里并不会引用它，可以改成这样new RegExp("( ?:?|^)sfhover\\b；这样匹配后就不会存储数据，另“this.className+=(this.className.length>0? " ": "") + "sfhover"; 　”可以使用这样来代替“this.className += " sfhover"; 　”只需在sfhover前面加个英文半角空格即可。

　　上面的两个问题是可以用另一种方法解决的，思路是这样：首先呢，鼠标划过导航链接时，我把li标签的className的值存储在tmpclass中；然后再改变li标签的className的值；鼠标移出链接时，我再把原先的className（即tmpclass）的值还给被修改后的className，也就是this.className = this.tmpclass；

　　最后，虽然这样修改了以后；有时还是会出现上面的情况；但是几率小了很多。具体为什么还出现，我就不是很清楚了！！

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

补充说明（黎智聪）：

关于为什么使用 this.className+=(this.className.length>0? " ": "") + "sfhover"; 的答疑：

当this.className为空的时候，this.className=this.className+""+"sfhover"
不为空的时候 this.className=this.className+" "+"sfhover

加空格是因为一个每个标签是可以有多个class的，<element class="c1 c2">，中间用" "分隔，兼顾HTML/CSS代码语法标准和代码效率。

欢迎继续深入研究：单目、双目和三目运算，代码可读性和效率的对比。