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 相关文章推荐
json 定义
Jun 10 Javascript
JavaScript日历实现代码
Sep 12 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
jQuery动态生成Bootstrap表格
Nov 01 Javascript
用file标签实现多图文件上传预览
Feb 14 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
关于React动态加载路由处理的相关问题
Jan 07 Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 Javascript
浅谈react路由传参的几种方式
Mar 23 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
如何获知PHP程序占用多少内存(memory_get_usage)
2012/09/23 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
innerHTML在IE中报错解决方案
2014/12/15 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
vue构建动态表单的方法示例
2018/09/22 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
ES6字符串的扩展实例
2020/12/21 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
Python实现的最近最少使用算法
2015/07/10 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
详解Django中间件执行顺序
2018/07/16 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
python计算阶乘和的方法(1!+2!+3!+...+n!)
2019/02/01 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
python进行参数传递的方法
2020/05/12 Python
Python的Django框架实现数据库查询(不返回QuerySet的方法)
2020/05/19 Python
selenium如何定位span元素的实现
2021/01/13 Python
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
成教毕业生自我鉴定
2013/10/23 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
社区先进事迹材料
2014/05/19 职场文书
机关作风建设心得体会
2014/10/22 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android