JavaScript鼠标悬浮出现下拉菜单效果

快乐打工仔 分类:实例代码

本章节分享一段代码实例,它实现了鼠标悬浮出现下拉菜单效果。

代码实例如下:

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).function menuFix(){},此方法是onload事件处理函数。

(2).var sfEls=document.getElementById("menu").getElementsByTagName("li"),获取li元素集合。

(3).for (var index=0;index<sfEls.length;index++){},遍历每一个li元素集合。

(4).sfEls[index].onmouseover=function(){  this.className+=(this.className.length > 0 ? " " : "") + "sfhover";

},为当前li元素注册onmouseover时间处理函数。如果当前li元素具有class属性,那么后面加个空格再连接上"sfhover",如果没有class属性值,那么就链接一个空字符串,再连接上"sfhover"。其实就是这种形式class="a",如果再添加class类b的话,只能在a后面加一个空格,class="a b"。又因为样式表中有如下代码:

#menu ul li.sfhover ul{ 

  display:block;

},所以二级导航菜单会显示。

(5).sfEls[index].onmouseout=function(){

  this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");

},当鼠标离开的时候,就会把演示类中的sfhover替换为空,当然二级菜单就会隐藏。

二.相关阅读:

(1).getElementsByTagName()参阅document.getElementsByTagName()一章节。

(2).onmouseover事件参阅javascript mouseover事件一章节。

(3).className参阅js className一章节。

(4).onmouseout事件参阅javascript mouseout事件一章节。

(5).replace()参阅正则表达式replace()一章节。

回复

我来回复
  • 暂无回复内容