JS+CSS实现的简单折叠展开多级菜单效果
JS+CSS实现的简单折叠展开多级菜单效果
发布时间:2016-12-30 来源:查字典编辑
摘要:本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果。分享给大家供大家参考。具体如下:这是一款JS+CSS实现的多级折叠菜单,可折叠展开/...

本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果。分享给大家供大家参考。具体如下:

这是一款JS+CSS实现的多级折叠菜单,可折叠展开/合拢,没有引用任何的外部文件,也没有用到图片,虽然简单,而且还有些粗糙,但核心的东西已经展示给大家了,正在研究折叠菜单的朋友们,这一个小例子可能正是你需要的,好好研究一下吧。

运行效果截图如下:

JS+CSS实现的简单折叠展开多级菜单效果1

在线演示地址如下:

http://demo.jb51.net/js/2015/js-css-simple-zdzk-menu-style-codes/

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>折叠菜单</title> <style> #side_nav ul{display:none} </style> </head> <body> <ul id="side_nav"> <li><span>菜单1</span> <ul> <li><a href="#">菜单1-0</a></li> <li><a href="#">菜单1-1</a></li> </ul> </li> <li><span>菜单2</span> <ul> <li><a href="#">菜单2-0</a></li> <li><a href="#">菜单2-1</a></li> </ul> </li> <li><span>菜单3</span> <ul> <li><a href="#">菜单3-0</a></li> </ul> </li> </ul> <script type="text/javascript"> <!-- (function(){ var navWrap=document.getElementById("side_nav"); var nav1s=navWrap.getElementsByTagName("span"); var nav2s=navWrap.getElementsByTagName("ul"); for(var i=0,len=nav1s.length;i<len;i++){ nav1s[i].onclick=(function(i){ return function(){ for(var j=0;j<len;j++){ nav2s[j].style.display="none"; } nav2s[i].style.display="block"; } })(i) } })() //--> </script> </body> </html>

希望本文所述对大家的JavaScript程序设计有所帮助。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类