JS实现无限级网页折叠菜单(类似树形菜单)效果代码


Posted in Javascript onSeptember 17, 2015

本文实例讲述了JS实现无限级网页折叠菜单(类似树形菜单)效果代码。分享给大家供大家参考。具体如下:

这是一款超不错的网页折叠菜单,采用JavaScript实现。折叠菜单是大家比较常见到的一种菜单形式,可广泛应用于管理系统、后台左侧、产品列表中,本折叠菜单有点树形菜单的味道,相信“无限级”会满足你的要求。

运行效果截图如下:

JS实现无限级网页折叠菜单(类似树形菜单)效果代码

在线演示地址如下:

具体代码如下:

<html>
<head>
<title>无限级折叠菜单JS版</title>
<style> 
<!--
body,ul,h3 {margin:0px; padding:0px;}
li {list-style-type:none;}
body{
 font-size:12px;
 color:#333; 
 font-family: Simsun;
 line-height:15px;
 }
a{text-decoration:none;color:#004285;border:none;}
a:hover{text-decoration:none;color:#C33;}
#menu {
 width:260px;
 margin:50px auto; 
 padding:10px; 
 border:#EEE 1px solid;
 }
 #menu h3 {
 font-size:12px;
 }
 #menu ul { 
 background:url("images/ul-bg.gif") repeat-y 5px 0px; overflow:hidden;
 }
 #menu ul li {
 padding:5px 0 2px 15px; 
 background:url("images/tree-ul-li.gif") no-repeat 5px -32px; 
 }
 #menu ul li ul {display:none;}
 #menu ul li em {
 cursor:pointer;
 display:inline-block;
 width:15px;
 float:left;
 height:15px;
 margin-left:-14px;
 background:url("images/tree-ul-li.gif") no-repeat -32px 2px;
 }
 #menu ul li em.off {
 background-position: -17px -18px;
 }
 #menu ul li#end {
 background-color:#FFF;
 }
 #menu ul.off { 
 display:block;
 }
-->
</style>
</head>
<body>
<div id="menu">
 <h3>无限级折叠菜单JavaScript版</h3>
 <ul>
 <li><em></em><a href='javascript:void(0);'>菜单_1_1</a>
 <ul>
  <li><em></em><a href='javascript:void(0);'>菜单_2_1</a>
  <ul>
  <li><em></em><a href='javascript:void(0);'>菜单_3_1</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜单_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  <li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜单_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  </ul>
  </li>
  <li id='end'><em></em><a href='javascript:void(0);'>菜单_2_2</a>
  <ul>
  <li><em></em><a href='javascript:void(0);'>菜单_3_1</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜单_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  <li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜单_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  </ul>
  </li>
 </ul>
 </li>
 <li id='end'><em></em><a href='javascript:void(0);'>菜单_1_2</a>
 <ul>
  <li><em></em><a href='javascript:void(0);'>菜单_2_1</a>
  <ul>
  <li><em></em><a href='javascript:void(0);'>菜单_3_1</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜单_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  <li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜单_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  </ul>
  </li>
  <li id='end'><em></em><a href='javascript:void(0);'>菜单_2_2</a>
  <ul>
  <li><em></em><a href='javascript:void(0);'>菜单_3_1</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜单_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  <li id='end'><em></em><a href='javascript:void(0);'>菜单_3_2</a>
  <ul>
   <li><em></em><a href='javascript:void(0);'>菜单_4_1</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
   <li id='end'><em></em><a href='javascript:void(0);'>菜单_4_2</a>
   <ul>
   <li><a href='javascript:void(0);'>菜单_5_1</a></li>
   <li id='end'><a href='javascript:void(0);'>菜单_5_2</a></li>
   </ul>
   </li>
  </ul>
  </li>
  </ul>
  </li>
 </ul>
 </li>
 </ul>
</div>
<script type="text/javascript"> 
(function(e){
 for(var _obj=document.getElementById(e.id).getElementsByTagName(e.tag),i=-1,em;em=_obj[++i];){
 em.onclick = function(){ //onmouseover
  var ul = this.nextSibling;
  if(!ul){return false;}
  ul = ul.nextSibling; if(!ul){return false;} 
  if(e.tag != 'a'){ ul = ul.nextSibling; if(!ul){return false;} } //a 标签控制 隐藏或删除该行
  for(var _li=this.parentNode.parentNode.childNodes,n=-1,li;li=_li[++n];){
  if(li.tagName=="LI"){
   for(var _ul=li.childNodes,t=-1,$ul;$ul=_ul[++t];){
   switch($ul.tagName){
   case "UL":
    $ul.className = $ul!=ul?"" : ul.className?"":"off";
   break;
   case "EM":
    $ul.className = $ul!=this?"" : this.className?"":"off";
   break;
   }
   }
  }
  }
 }
 }
})({id:'menu',tag:'em'});
</script>
</body>
</html>

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

Javascript 相关文章推荐
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
JS Map 和 List 的简单实现代码
Jul 08 Javascript
JQuery Highcharts 动态生成图表的方法
Nov 15 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
javascript Array 数组常用方法
Apr 05 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
jquery——九宫格大转盘抽奖实例
Jan 16 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
微信小程序之圆形进度条实现思路
Feb 22 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 #Javascript
ANGULARJS中使用JQUERY分页控件
Sep 16 #Javascript
js实现tab切换效果实例
Sep 16 #Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 #Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 #Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 #Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 #Javascript
You might like
Terran魔法科技
2020/03/14 星际争霸
详解PHP字符串替换str_replace()函数四种用法
2017/10/13 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
基于jquery的跟随屏幕滚动代码
2012/07/24 Javascript
固定背景实现的背景滚动特效示例分享
2013/05/19 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
2018/03/19 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
在自动化中用python实现键盘操作的方法详解
2019/07/19 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
python中scrapy处理项目数据的实例分析
2020/11/22 Python
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
SHEIN美国:购买时髦的女性服装
2020/12/02 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
过滤器的用法
2013/10/08 面试题
办理暂住证介绍信
2014/01/11 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
2015小学音乐教师个人工作总结
2015/07/21 职场文书
《月光曲》教学反思
2016/02/16 职场文书
小学数学教学反思范文
2016/02/16 职场文书
Windows下用Nginx配置https服务器及反向代理的问题
2021/09/25 Servers
Python函数对象与闭包函数
2022/04/13 Python