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 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
Javascript模块模式分析
May 16 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
解决jquery异步按一定的时间间隔刷新问题
Dec 10 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
jquery使用jxl插件导出excel示例
Apr 14 Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
angular异步验证器防抖实例详解
Mar 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隐形一句话后门,和ThinkPHP框架加密码程序(base64_decode)
2011/11/02 PHP
PHP批量获取网页中所有固定种子链接的方法
2016/11/18 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
javascript中html字符串转化为jquery dom对象的方法
2015/08/27 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
javascript闭包功能与用法实例分析
2017/04/06 Javascript
jsonp跨域请求详解
2017/07/13 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
vue-cli 3.x配置跨域代理的实现方法
2019/04/12 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
Vue数字输入框组件示例代码详解
2020/01/15 Javascript
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
详解Python3注释知识点
2019/02/19 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
对python中list的五种查找方法说明
2020/07/13 Python
CSS3实现彩色进度条动画的示例
2020/10/29 HTML / CSS
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
Java实现聊天机器人完善版
2021/07/04 Java/Android