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 相关文章推荐
Prototype String对象 学习
Jul 19 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
JS定时关闭窗口的实例
May 22 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
Dec 29 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
echarts多条折线图动态分层的实现方法
May 24 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
vue-amap根据地址回显地图并mark的操作
Nov 03 Javascript
解决iview table组件里的 固定列 表格不自适应的问题
Nov 13 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
精通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 sprintf() 函数的应用(定义和用法)
2012/06/29 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
jQuery 实现评论等级好评差评特效
2016/05/06 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
jQuery选择器总结之常用元素查找方法
2016/08/04 Javascript
关于动态执行代码(js的Eval)实例详解
2016/08/15 Javascript
第一次接触神奇的前端框架vue.js
2016/12/01 Javascript
js实现炫酷的左右轮播图
2017/01/18 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
微信小程序Flex布局用法深入浅出分析
2019/04/25 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
基于Python实现的扫雷游戏实例代码
2014/08/01 Python
Python调用C语言开发的共享库方法实例
2015/03/18 Python
Python实现合并字典的方法
2015/07/07 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
python学习--使用QQ邮箱发送邮件代码实例
2019/04/16 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
python中有关时间日期格式转换问题
2019/12/25 Python
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
2016/06/22 HTML / CSS
Html5实现移动端、PC端 刮刮卡效果
2016/06/30 HTML / CSS
Big Green Smile德国网上商店:提供各种天然产品
2018/05/23 全球购物
庆元旦迎新年广播稿
2014/02/18 职场文书
2016应届大学生自荐信模板
2016/01/28 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android
Python OpenCV实现图形检测示例详解
2022/04/08 Python
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python