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 相关文章推荐
图片按比例缩放函数
Jun 26 Javascript
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
使用PHP+JQuery+Ajax分页的实现
Apr 23 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
IE下Ajax缓存问题的快速解决方法(get方式)
Jan 09 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
AngularJS ng-change 指令的详解及简单实例
Jul 30 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
Nov 17 Javascript
vue slot与传参实例代码讲解
Apr 28 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 substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
浅析is_writable的php实现
2013/06/18 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
PHP编写简单的App接口
2016/08/28 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
namespace.js Javascript的命名空间库
2011/10/11 Javascript
Jquery动态替换div内容及动态展示的方法
2015/01/23 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
JavaScript中的Math.E属性使用详解
2015/06/12 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
Vue+Element使用富文本编辑器的示例代码
2017/08/14 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
使用Python的Tornado框架实现一个一对一聊天的程序
2015/04/25 Python
Python实现命令行通讯录实例教程
2016/08/18 Python
Python编程之string相关操作实例详解
2017/07/22 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
详解python3中zipfile模块用法
2018/06/18 Python
解决Pycharm出现的部分快捷键无效问题
2018/10/22 Python
python 使用 requests 模块发送http请求 的方法
2018/12/09 Python
Python使用crontab模块设置和清除定时任务操作详解
2019/04/09 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Jupyter notebook运行Spark+Scala教程
2020/04/10 Python
pandas使用函数批量处理数据(map、apply、applymap)
2020/11/27 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
浅析HTML5 meta viewport参数
2020/10/28 HTML / CSS
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
Java基础面试题
2012/11/02 面试题
环境卫生倡议书
2014/08/29 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
幼儿园教学工作总结2015
2015/05/12 职场文书
CSS几步实现赛博朋克2077风格视觉效果
2021/06/16 HTML / CSS