Javascript下拉菜单以及实现方法

DK 于2010,01,11发表 | 没有评论 »

Blog上要用到一个下拉菜单，网上这方面的例子很多，但是手头闲着没什么事情，就自己写了一个，顺便写一下自己在做的时候的思路，检查一下自己同时也与大家分享。大家先看Dorplist演示效果

要实现的目标很简单就是一个两级的下拉菜单.具体一点就是在已有的HTML代码的基础上按照不唐突的原则实现下拉列表。

主要的容易出问题的地方就是mouseover和mouseout事件分发问题这个在前面的一篇文章中已经说过了。

其它的部分就比较简单了，首先要考虑到就是初始化，即对HTML的元素进行样式控制，并且给第一层菜单注册事件。

  1. dk.addEvent(this.firstLevelElements[i],'mouseover',function(w3cEvent){objSelf.showItems.call(objSelf,w3cEvent,this);});
  2. odk.addEvent(this.firstLevelElements[i],'mouseout',function(w3cEvent){objSelf.hideItems.call(objSelf,w3cEvent,this);});
  3. this.isHaveChild(this.firstLevelElements[i]) && (this.firstLevelElements[i].getElementsByTagName('ul')[0].style.display='none');

然后我们需要考虑到就是鼠标在不同菜单项之间移动的时候的逻辑。最简单的就是当鼠标移上的时候显示子菜单，当鼠标移开的时候隐藏子菜单。但是这样会有一个问题，就是当子菜单与当前选中的菜单之间有一段间隔的时候我们的鼠标可能永远移动不到子菜单上，所以我们给隐藏子菜单的方法加一个时间的延迟。
  1. this.timer=setTimeout(dk.bind(this,function(){target.getElementsByTagName('ul')[0].style.display='none';this.lastElement=target;this.currentElement=null;}),this.delayTime);

但是新的问题出现了，那就是还得考虑目标是否是同一个目标，以再次移入的时候保持状态，所以我又添加了一个this.currentElement对象来判断是否为当前目标，当隐藏函数成功执行后这个判断标志才会再一次置空。

好了，效果基本实现了，可能觉得只是简单的隐藏或者显示有点单调，我们可以给显示或者隐藏添加一点动画效果。我在这个地方添加了一个向下展开的效果，当然你也可以添加自己喜欢的效果，比如淡入等等。

  1. menuTool.prototype.slideDown=function(target){
  2. o//判断目标的状态
  3. oif(!target.status){
  4. o//如果目标状态不存在或者为null则将其高度赋给endHeight
  5. otarget.endHeight = target.clientHeight;
  6. o//调试日志
  7. odk.$('logs').innerHTML+=target.endHeight+'';
  8. otarget.style.height='0px';
  9. o}
  10. o(!!target.status)||(target.status=true);
  11. otarget.style.height=(parseInt(target.style.height)+(parseInt(target.endHeight)-parseInt(target.style.height))/2)+'px';
  12. o//判断动画结束的标志，当目标的高度与endHeight之间的差值小于1px的时候结束动画，否则继续
  13. oif((parseInt(target.endHeight)-parseInt(target.style.height))>1){
  14. osetTimeout(dk.bind(this,function(){this.slideDown(target);}),50);
  15. o}
  16. oelse{
  17. otarget.style.height=target.endHeight+'px';
  18. otarget.status=null;
  19. o}
  20. }

全部代码贴出来有点问题，就不贴全部的代码了。在使用的时候请将调试日志相关代码删除。
刚才写完了觉得没什么问题了，结果差点栽了，忘记一个问题就是在ff下面回车也算是一个节点的，这点与MSIE不同。

效果演示：Dorplist演示效果
源文件下载：Droplist

转载请注明原文出处《Javascript下拉菜单以及实现方法》 如无特别声明，所有文章均遵守创作共用 署名－非商业－禁止演绎 3.0协议。

标签: , , , , | 分类： Javascript, 编程 |

我要评论