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 相关文章推荐
javascript 图片裁剪技巧解读
Nov 15 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
Jan 17 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
Nov 21 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
超全面的javascript中变量命名规则
Feb 09 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
Oct 31 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
php中$_GET与$_POST过滤sql注入的方法
2014/11/03 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
jQuery实现的仿百度分页足迹效果代码
2015/10/30 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
实例详解JavaScript中setTimeout函数的执行顺序
2017/07/12 Javascript
Echarts基本用法_动力节点Java学院整理
2017/08/11 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
[05:35]DOTA2英雄梦之声_第13期_拉比克
2014/06/21 DOTA
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
Python实现PS滤镜中的USM锐化效果
2020/12/04 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
介绍一下内联、左联、右联
2013/12/31 面试题
如何查找和删除数据库中的重复数据
2014/11/05 面试题
2014年个人思想工作总结
2014/11/27 职场文书
2014年政协委员工作总结
2014/12/01 职场文书
入党政审材料范文
2014/12/24 职场文书
会议新闻稿
2015/07/17 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书