首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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+CSS实现的可折叠二级菜单实例

- Author -

Robin99

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
JavaScript操作URL的相关内容集锦
Oct 29 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
微信公众号-获取用户信息（网页授权获取）实现步骤
Oct 21 Javascript
Node.js利用debug模块打印出调试日志的方法
Apr 25 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
微信小程序实现的自定义分享功能示例
Feb 12 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
JavaScript中EventBus实现对象之间通信
Oct 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
有序排列(1) 数据加密(1) key(1) pycryto(1) 遍历文件夹(1) Anaconda(2) html标准库(1) 历史记录(1) python-pcl(1) 公共键(1)
You might like
一步一步学习PHP(1) php开发环境配置
2010/02/15 PHP
使用php方法curl抓取AJAX异步内容思路分析及代码分享
2014/08/25 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
PHP自定义序列化接口Serializable用法分析
2017/12/29 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
快速查找数组中的某个元素并返回下标示例
2013/09/03 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
IE8中使用javascript动态加载CSS的解决方法
2014/06/17 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
select自定义小三角样式代码（实用总结）
2017/08/18 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
基于原生js实现九宫格算法代码实例
2020/07/03 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
举例详解Python中循环语句的嵌套使用
2015/05/14 Python
解决Python2.7读写文件中的中文乱码问题
2018/04/12 Python
python之消除前缀重命名的方法
2018/10/21 Python
Scrapy模拟登录赶集网的实现代码
2020/07/07 Python
Python中return函数返回值实例用法
2020/11/19 Python
Unix里面如何在后台运行程序
2016/10/14 面试题
车辆维修工自我评价怎么写
2013/09/20 职场文书
会计专业推荐信
2013/10/29 职场文书
计算机毕业大学生推荐信
2013/12/01 职场文书
运动会开幕式解说词
2014/02/05 职场文书
空中乘务员岗位职责
2014/03/08 职场文书
年终总结会议主持词
2014/03/17 职场文书
2014年村官工作总结
2014/11/24 职场文书
门面房租房协议书
2014/12/01 职场文书
安全主题班会教案
2015/08/12 职场文书
python中tkinter复选框使用操作
2021/11/11 Python
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers