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 相关文章推荐
jquery radio 操作代码
Mar 16 Javascript
namespace.js Javascript的命名空间库
Oct 11 Javascript
Javascript操作cookie的函数代码
Oct 03 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
jQuery操作基本控件方法实例分析
Dec 31 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
BootStrap学习系列之布局组件(下拉,按钮组[toolbar],上拉)
Jan 03 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
vue-cli中vue本地实现跨域调试接口
Jan 16 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 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中ini_set和ini_get函数的用法小结
2014/02/18 PHP
php使用GD库创建图片缩略图的方法
2015/06/10 PHP
适合PHP初学者阅读的4本经典书籍
2016/09/23 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
默认让页面的第一个控件选中的javascript代码
2009/12/26 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
Javascript实现跑马灯效果的简单实例
2016/05/31 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
浅谈angular4实际项目搭建总结
2017/12/01 Javascript
vue webpack打包优化操作技巧
2018/02/22 Javascript
vue使用rem实现 移动端屏幕适配
2018/09/26 Javascript
vue 实现移动端键盘搜索事件监听
2019/11/06 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
Python字符编码判断方法分析
2016/07/01 Python
Python中shutil模块的常用文件操作函数用法示例
2016/07/05 Python
浅谈python常用程序算法
2019/03/22 Python
Python Opencv中用compareHist函数进行直方图比较对比图片
2020/04/07 Python
canvas之万花筒效果的简单实现(推荐)
2016/08/16 HTML / CSS
手工制作的豪华英式沙发和沙发床:Willow & Hall
2019/05/03 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
教学大赛获奖感言
2014/01/15 职场文书
给幼儿园老师的表扬信
2014/01/19 职场文书
《问银河》教学反思
2014/02/19 职场文书
聚美优品广告词改编
2014/03/14 职场文书
国庆节演讲稿
2014/05/27 职场文书
篮球赛口号
2014/06/18 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
4s店销售经理岗位职责
2014/07/19 职场文书
班主任工作实习计划
2015/01/16 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python