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


Posted in Javascript onSeptember 12, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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 相关文章推荐
FormValid0.5版本发布,带ajax自定义验证例子
Aug 17 Javascript
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
JS简单实现元素复制示例附图
Nov 19 Javascript
简介JavaScript中的getSeconds()方法的使用
Jun 10 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
Nov 05 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
May 05 Javascript
微信小程序实现Session功能及无法获取session问题的解决方法
May 07 Javascript
关于ligerui子页面关闭后,父页面刷新,重新加载的方法
Sep 27 Javascript
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
基于Arcgis for javascript实现百度地图ABCD marker的效果
Sep 12 #Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 #Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 #Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 #Javascript
javascript判断网页是关闭还是刷新
Sep 12 #Javascript
js查看一个函数的执行时间实例代码
Sep 12 #Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 #Javascript
You might like
php strftime函数的详细用法
2018/06/21 PHP
php实现记事本案例
2020/10/20 PHP
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
JS 的应用开发初探(mootools)
2009/12/19 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
jQuery 图片切换插件(代码比较少)
2012/05/07 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
2016/07/22 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
node文件批量重命名的方法示例
2017/10/23 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
vue下拉刷新组件的开发及slot的使用详解
2020/12/23 Vue.js
python访问mysql数据库的实现方法(2则示例)
2016/01/06 Python
Python获取CPU、内存使用率以及网络使用状态代码
2018/02/08 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
python爬虫增加访问量的方法
2019/08/22 Python
python中rc1什么意思
2020/06/19 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
5分钟弄清楚html5的drag and drop(小结)
2019/04/10 HTML / CSS
美国网上花店:JustFlowers
2017/02/12 全球购物
党的群众路线教育实践活动心得体会900字
2014/03/07 职场文书
出纳担保书范文
2014/04/02 职场文书
食品安全汇报材料
2014/08/18 职场文书
公司自我介绍演讲稿
2014/08/21 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
论群众路线学习心得体会
2014/10/31 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
zabbix agent2 监控oracle数据库的方法
2021/05/13 Oracle