JavaScript+CSS实现的可折叠二级菜单实例


Posted in Javascript onFebruary 29, 2016

本文实例讲述了JavaScript+CSS实现的可折叠二级菜单。分享给大家供大家参考,具体如下:

.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: 200px;
 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;
 float: left;
}
#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</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)">菜单2</a>
 <ul>
 <li><a href="javascript:void(0);">菜单2_1</a></li>
 <li><a href="javascript:void(0);">菜单2_2</a></li>
 </ul>
</li>
<li><a href="javascript:void(0);" onclick="doMenu(this)">菜单3</a>
 <ul>
 <li><a href="javascript:void(0);">菜单3_1</a></li>
 <li><a href="javascript:void(0);">菜单3_2</a></li>
 </ul>
</li>
</ul>
</div>
</form>
</body>
</html>

js文件:

function doMenu(obj){
 var items=obj.parentNode.getElementsByTagName("ul");
 var itmUl;
 if(items.length>0){
 itmUl=items[0];
 }
 if(itmUl.className!="ex"){
 cxAll();
 itmUl.className="ex";
 }else{
 itmUl.className="cx";
 }
}
function statUp(){
 cxAll();
}
function cxAll(){
 var ulDom=document.getElementById("nav");
 var items=ulDom.getElementsByTagName("ul");
 for (var i=0;i<items.length;i++)
 {
 items[i].className="cx";
 }
}

在这里需要注意的是延迟加载的问题,由于页面加载时需要执行预处理操作statUp()方法,js单独写成一个文件或 js写在<head>节点中时,需要使用window.onload=function(){执行语句;} 延迟加载,不然引用DOM中对象时,会出现缺少对象 错误提示。

别一种解决方法,直接将所有javaScript 写在</html>

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>菜单</title>
<script type="text/javascript" src="Untitled-3.js"></script>
<style>
*{
 margin: 0px;
 padding: 0px;
 border:0px;
}
#nav{
 width: 200px;
 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;
 float: left;
}
#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>
</head>
<body>
<div id="Parent">
<ul id="nav">
<li><a href="javascript:void(0);" onclick="doMenu(this)">菜单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)">菜单2</a>
 <ul>
 <li><a href="javascript:void(0);">菜单2_1</a></li>
 <li><a href="javascript:void(0);">菜单2_2</a></li>
 </ul>
</li>
<li><a href="javascript:void(0);" onclick="doMenu(this)">菜单3</a>
 <ul>
 <li><a href="javascript:void(0);">菜单3_1</a></li>
 <li><a href="javascript:void(0);">菜单3_2</a></li>
 </ul>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
function doMenu(obj){
 var items=obj.parentNode.getElementsByTagName("ul");
 var itmUl;
 if(items.length>0){
 itmUl=items[0];
 }
 if(itmUl.className!="ex"){
 cxAll();
 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";
 }
 }
statUp();
</script>

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

Javascript 相关文章推荐
让checkbox不选中即将选中的checkbox不选中
Jul 11 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
详解AngularJS 模块化
Jun 14 Javascript
深入探究AngularJs之$scope对象(作用域)
Jul 20 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
深入理解Promise.all
Aug 08 Javascript
解决layui弹出层layer的area过大被遮挡的问题
Sep 21 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 Javascript
JS三级可折叠菜单实现方法
Feb 29 #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
You might like
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
php建立Ftp连接的方法
2015/03/07 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
微信小程序 Record API详解及实例代码
2016/09/30 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
JavaScript使用localStorage存储数据
2019/09/25 Javascript
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
Python实现去除列表中重复元素的方法小结【4种方法】
2018/04/27 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
Python3数字求和的实例
2019/02/19 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
Python创建一个元素都为0的列表实例
2019/11/28 Python
python实现指定ip端口扫描方式
2019/12/17 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
日本小田急百货官网:Odakyu
2018/07/19 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
自我反省检讨书
2014/01/23 职场文书
中学教师培训制度
2014/01/31 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
投资意向书范本
2014/04/01 职场文书
法人授权委托书范本
2014/04/04 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
2015年安全生产月活动总结
2015/03/26 职场文书