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 相关文章推荐
jQuery 源码分析笔记(3) Deferred机制
Jun 19 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
jquery结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
基于JavaScript实现弹出框效果
Feb 19 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
node中的session的具体使用
Sep 14 Javascript
Elasticsearch实现复合查询高亮结果功能
Sep 10 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
基于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
dedecms采集中可以过滤多行代码的正则表达式
2007/03/17 PHP
php图片验证码代码
2008/03/27 PHP
php控制文件下载速度的方法
2015/03/24 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
JQuery index()方法使用代码
2010/06/02 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
AngularJS使用ngMessages进行表单验证
2015/12/27 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
2016/04/30 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
js HTML5 Canvas绘制转盘抽奖
2020/09/13 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
express 项目分层实践详解
2018/12/10 Javascript
layui前端时间戳转化实例
2019/11/15 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
win7安装python生成随机数代码分享
2013/12/27 Python
Django实现图片文字同时提交的方法
2015/05/26 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
PyQt5实现类似别踩白块游戏
2019/01/24 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
pycharm运行scrapy过程图解
2019/11/22 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
python实现超级马里奥
2020/03/18 Python
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
东南亚冒险旅行与活动:Adventoro
2019/10/16 全球购物
小学社团活动总结
2014/06/27 职场文书
应届毕业生求职简历自我评价
2015/03/02 职场文书
盗窃案辩护词
2015/05/21 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
简单聊聊Golang中defer预计算参数
2022/03/25 Golang