JS三级可折叠菜单实现方法


Posted in Javascript onFebruary 29, 2016

本文实例讲述了JS三级可折叠菜单实现方法。分享给大家供大家参考,具体如下:

.ASPX代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="NavigateMenu.aspx.cs" Inherits="NavigateMenu" %>
<!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 runat="server">
  <title>无标题页</title>
  <script type="text/javascript" src="JScript.js" ></script>
  <style type="text/css">
*{
 margin: 0px;
 padding: 0px;
 border:0px;
}
#nav{
 width: 600px;
 margin: 0px;
 padding: 0px;
 font-size: 14px;
 line-height: 30px;
}
#nav li{
 width: 180px;
 padding-left: 20px;
 padding-bottom: 1px;
 list-style-image: none;
 list-style-type: none;
 background-color: #FFFFFF;
}
#nav a{
 padding-left: 20px;
 background-color: #BFBFBF;
 display: block;
 text-decoration: none;
}
#nav a:hover {
 background-color: #FF9175;
}
#nav li ul{
 padding-top: 1px;
 list-style-image: none;
 list-style-type: none;
}
#nav li li{
 padding-left: 0px;
}
#nav ul a{
 background-color: #EBEBEB;
}
.cx {
 display:none;
 visibility:hidden;
}
.ex {
 display:inherit;
 visibility:inherit;
}
</style>
<script type="text/javascript" >
 window.onload=function(){
 statUp();
 }
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="Parent">
<ul id="nav">
<li><a href="javascript:void(0);" onclick="doMenu(this,'1')">菜单1</a>
 <ul>
 <li><a href="javascript:void(0);">菜单1_1</a></li>
 <li><a href="javascript:void(0);">菜单1_2</a></li>
 </ul>
</li>
<li><a href="javascript:void(0);" onclick="doMenu(this,'1')">菜单2</a>
 <ul>
 <li><a href="javascript:void(0);" onclick="doMenu(this,'2')" >菜单2_1</a>
 <ul>
 <li>菜单2_1_1</li>
 <li>菜单2_1_2</li>
 </ul>
 </li>
 <li><a href="javascript:void(0);" onclick="doMenu(this,'2')">菜单2_2</a>
  <ul>
 <li>菜单2_2_1</li>
 </ul>
 </li>
 </ul>
</li>
</ul>
</div>
</form>
</body>
</html>

js文件代码:

function doMenu(obj,strDeep){
 var items=obj.parentNode.getElementsByTagName("ul");
 //获取a 对象你节点li 下包含的 所有ul集合
 var itmUl;
 var deeps=strDeep; //strDeep 为当前菜单的级数
 if(items.length>0){
 itmUl=items[0];
 alert(itmUl);
 }
 if(itmUl.className!="ex"){
 cxAll();//当前节点为关闭状态时,先执行关闭所有ul子菜单
 if(deeps=='2'){ //若要展开三级菜单当,还要将其二级父菜单展开
 itmUl.parentNode.parentNode.className="ex";
 }
 itmUl.className="ex"; //展开下级菜单
 }else{
 itmUl.className="cx";
 }
}
function statUp(){
 cxAll();
 var ulDom=document.getElementById("nav");
 var items=ulDom.getElementsByTagName("ul");
}
function cxAll(){
 var ulDom=document.getElementById("nav");
 var items=ulDom.getElementsByTagName("ul");
 for (var i=0;i<items.length;i++)
 {
 items[i].className="cx";
 }
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript高亮效果的二种实现方法
Sep 14 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
BootStrap实用代码片段之一
Mar 22 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
利用Node.js了解与测量HTTP所花费的时间详解
Sep 22 Javascript
JS运动特效之同时运动实现方法分析
Jan 24 Javascript
微信小程序实现留言板
Oct 31 Javascript
精通JavaScript的this关键字
May 28 #Javascript
javascript正则表达式总结
Feb 29 #Javascript
javascript计时器编写过程与实现方法
Feb 29 #Javascript
javascript插件开发的一些感想和心得
Feb 28 #Javascript
详解Javascript中的Object对象
Feb 28 #Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 #Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
Feb 27 #Javascript
You might like
一个简单且很好用的php分页类
2013/10/26 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
Prototype源码浅析 Number部分
2012/01/16 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
jQuery解析XML文件同时动态增加js文件的方法
2015/06/01 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
JS实现图片点击后出现模态框效果
2017/05/03 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
Bootstrap实现的表格合并单元格示例
2018/02/06 Javascript
详解新手使用vue-router传参时注意事项
2019/06/06 Javascript
在vue项目中使用sass语法问题
2019/07/18 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
python函数参数*args**kwargs用法实例
2013/12/04 Python
python处理PHP数组文本文件实例
2014/09/18 Python
Python的Django框架中模板碎片缓存简介
2015/07/24 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python使用functools实现注解同步方法
2018/02/06 Python
解决python "No module named pip" 的问题
2018/10/13 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
python实现高斯投影正反算方式
2020/01/17 Python
简约控的天堂:The Undone
2016/12/21 全球购物
Java语言程序设计测试题选择题部分
2014/04/03 面试题
简历中自我评价怎么写
2014/02/12 职场文书
教职工代表大会主持词
2014/04/01 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
小学班级特色活动方案
2014/08/31 职场文书
幼儿园教师考核评语
2014/12/31 职场文书
信访工作个人总结
2015/03/03 职场文书
小学生暑假生活总结
2015/07/13 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
MySQL 四种连接和多表查询详解
2021/07/16 MySQL
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏