JS实例教程:全兼容可高亮二级缓冲折叠菜单

表现层：

样式表的设置都很简单，唯一要注意的是，为了便于JS控制二级菜单的显隐和记录当前选中项的高亮状态，所以我不用hover伪类来实现鼠标的滑入滑出效果，而采用JS来模拟它。用JS控制样式的关键代码如下：

一级菜单样式

 /*一级菜单三态样式,供JS调用*/
 .menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif) no-repeat left top;}
 .menu li.level1 a.hove{background-position:left -31px;}
 .menu li.level1 a.cur{background-position:left -62px;}

 二级菜单样式

 /*二级菜单三态样式,供JS调用*/
 .menu li.level1 a{display:block;line-height:31px;height:31px;padding-left:50px; font-size:12px;color:#fff;background:url(../images/menubg.gif) no-repeat left top;}
 .menu li.level1 a.hove{background-position:left -31px;}
 .menu li.level1 a.cur{background-position:left -62px;}

行为层：

因为前面已经提到，我们在样式表并没有定义菜单的三态效果，所以我们需要给每个菜单项绑定onmouseover、onmouseout和onclick事件模拟出这种效果来。在结构层中我们并没有定义这个总容器的ID，而只定义了一个class类名，所以在JS添加了一个扩展的getElementsByClassName()方法（感谢好友司徒正美），根据类名来获得这个对象。用循环闭包来绑定这三个事件。

详细代码就不一一解说了，Demo中注释得非常清楚，请下载到本机浏览。

有什么问题请在本博客中跟贴讨论，祝你用得开心！

最后附上全部源码：demo下载

原文：http://www.cnblogs.com/binyong/archive/2010/05/28/1745918.html

<li><a href="#none">一级菜单项</a>
 <ul>
  <li><a href="#none">二级菜单项</a></li>         
 </ul>
</li>

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!