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 日期分离成年月日的代码
May 14 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
JavaScript里 ==与===区别详解
Aug 16 Javascript
js实现拖拽功能
Mar 01 Javascript
js数组实现权重概率分配
Sep 12 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
Feb 18 jQuery
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 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
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
js防止表单重复提交实现代码
2012/09/05 Javascript
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
用Jquery实现滚动新闻
2014/02/12 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
2016/12/20 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
nodeJs爬虫的技术点总结
2018/05/13 NodeJs
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
微信小程序如何调用json数据接口并解析
2019/06/29 Javascript
VUE 自定义组件模板的方法详解
2019/08/30 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
用python找出那些被“标记”的照片
2017/04/20 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
Python中的Numpy矩阵操作
2018/08/12 Python
Python使用pandas和xlsxwriter读写xlsx文件的方法示例
2019/04/09 Python
python实现读取excel文件中所有sheet操作示例
2019/08/09 Python
python根据时间获取周数代码实例
2019/09/30 Python
TensorFlow命名空间和TensorBoard图节点实例
2020/01/23 Python
Python中的Cookie模块如何使用
2020/06/04 Python
Django Session和Cookie分别实现记住用户登录状态操作
2020/07/02 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
SIXPAD智能健身仪英国官网:革命性的训练装备品牌
2018/09/27 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
商得四方公司面试题(gid+)
2014/04/30 面试题
花店创业计划书范文
2014/02/07 职场文书
餐厅经理岗位职责范本
2014/02/17 职场文书
摄影专业毕业生求职信
2014/08/05 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
驻村工作简报
2015/07/20 职场文书
社区宣传标语口号
2015/12/26 职场文书
Python测试框架pytest高阶用法全面详解
2022/06/01 Python