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类,兼容IE及Firefox
Jun 23 Javascript
通过隐藏option实现select的联动效果
Nov 10 Javascript
jquery获取一个元素下面相同子元素的个数代码
Jul 31 Javascript
JS实现的通用表单验证插件完整实例
Aug 20 Javascript
js制作可以延时消失的菜单
Jan 13 Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
JS数组方法concat()用法实例分析
Jan 18 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
Laravel 实现密码重置功能
2018/02/23 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
Thinkphp 框架扩展之类库扩展操作详解
2020/04/23 PHP
javascript firefox兼容ie的dom方法脚本
2008/05/18 Javascript
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
js 全兼容可高亮二级缓冲折叠菜单
2010/06/04 Javascript
jQuery之排序组件的深入解析
2013/06/19 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
2014/05/28 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
ES6学习之变量的两种命名方法示例
2017/07/18 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
vue组件间通信六种方式(总结篇)
2019/05/15 Javascript
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
小程序实现上下切换位置
2020/11/16 Javascript
[48:02]Ti4循环赛第三日 VG vs Liquid和NEWBEE vs DK
2014/07/12 DOTA
Pytorch 实现权重初始化
2019/12/31 Python
python和js交互调用的方法
2020/06/23 Python
Python3交互式shell ipython3安装及使用详解
2020/07/11 Python
python代码实现图书管理系统
2020/11/30 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
澳大利亚顶级美发和美容贸易超市:glamaCo
2020/01/19 全球购物
乡镇庆八一活动方案
2014/02/02 职场文书
2014厂务公开实施方案
2014/02/17 职场文书
元旦晚会主持词
2014/03/24 职场文书
环保宣传标语
2014/06/12 职场文书
2014年副班长工作总结
2014/12/10 职场文书
西岭雪山导游词
2015/02/06 职场文书
2015年读书月活动总结
2015/03/26 职场文书
vue实现移动端div拖动效果
2022/03/03 Vue.js