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 相关文章推荐
url地址自动加#号问题说明
Aug 21 Javascript
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
jQuery 判断是否包含在数组中Array[]的方法
Aug 03 Javascript
AngularJs bootstrap详解及示例代码
Sep 01 Javascript
Bootstrap CSS组件之按钮下拉菜单
Dec 17 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
小程序卡片切换效果组件wxCardSwiper的实现
Feb 13 Javascript
原生javascript运动函数的封装示例【匀速、抛物线、多属性的运动等】
Feb 23 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
基于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
在Windows系统上安装PHP运行环境文字教程
2010/07/19 PHP
PHP字符串的递增和递减示例介绍
2014/02/11 PHP
PHP延迟静态绑定示例分享
2014/06/22 PHP
php 三元运算符实例详细介绍
2016/12/15 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
脚本收藏iframe
2006/07/21 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
让input框实现类似百度的搜索提示(基于jquery事件监听)
2014/01/31 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
React-Native实现ListView组件之上拉刷新实例(iOS和Android通用)
2017/07/11 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
Python实现处理管道的方法
2015/06/04 Python
详解Django中的权限和组以及消息
2015/07/23 Python
详解Python中heapq模块的用法
2016/06/28 Python
基于python 字符编码的理解
2017/09/02 Python
pip命令无法使用的解决方法
2018/06/12 Python
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
pytorch 更改预训练模型网络结构的方法
2019/08/19 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
Python 生成短8位唯一id实战教程
2021/01/13 Python
HTML5制作酷炫音频播放器插件图文教程
2014/12/30 HTML / CSS
舞蹈专业求职信
2014/06/13 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
违反交通法规检讨书
2014/09/10 职场文书
颐和园英文导游词
2015/01/30 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
详解MySQL集群搭建
2021/05/26 MySQL
python 闭包函数详细介绍
2022/04/19 Python