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 相关文章推荐
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
Dec 13 Javascript
js 取时间差去掉周六周日实现代码
Dec 25 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 Javascript
Vue通过Blob对象实现导出Excel功能示例代码
Jul 31 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实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP标准库(PHP SPL)详解
2019/03/16 PHP
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
AngularJS equal比较对象实例详解
2016/09/14 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
angularJS开发注意事项
2018/05/26 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
微信小程序select下拉框实现效果
2019/05/15 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
微信小程序组件传值图示过程详解
2019/07/31 Javascript
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
python中安装模块包版本冲突问题的解决
2017/05/02 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
Python使用configparser库读取配置文件
2020/02/22 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
Python中Selenium模块的使用详解
2020/10/09 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
世界上最悠久的自行车制造商:Ribble Cycles
2017/03/18 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
主题酒店策划书
2014/01/28 职场文书
药品促销活动方案
2014/02/14 职场文书
数控专业自荐书范文
2014/03/16 职场文书
2014年组织部工作总结
2014/11/14 职场文书
家庭财产分割协议范文
2014/11/24 职场文书
留学推荐信中文范文
2015/03/26 职场文书
食堂卫生管理制度
2015/08/04 职场文书
大学班长竞选稿
2015/11/20 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android