首页
所有分类
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 相关文章推荐
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
vue-cli常用设置总结
Feb 24 Javascript
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
webuploader实现上传图片到服务器功能
Aug 16 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 Javascript
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
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
H-501(1) S700(1) 山进(2) Grundig(1) ICF-SW07(1) S400(1) ATS-909X(1) PL990(2) S500(1) SANGEAN(1)
You might like
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
php错误日志简单配置方法
2016/07/11 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
php 输出json及显示json中的中文汉字详解及实例
2016/11/09 PHP
PHP实现多级分类生成树的方法示例
2017/02/07 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
提高Web性能的前端优化技巧总结
2017/02/27 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
12条写出高质量JS代码的方法
2018/01/07 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
Vue拖拽组件列表实现动态页面配置功能
2019/06/17 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
在Python中使用next()方法操作文件的教程
2015/05/24 Python
python生成验证码图片代码分享
2016/01/28 Python
python实现获取Ip归属地等信息
2016/08/27 Python
基于并发服务器几种实现方法(总结)
2017/12/29 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
python中dir()与__dict__属性的区别浅析
2018/12/10 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
把vgg-face.mat权重迁移到pytorch模型示例
2019/12/27 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
了解一下python内建模块collections
2020/09/07 Python
介绍一下代理模式(Proxy)
2014/10/17 面试题
《再别康桥》教学反思
2014/02/12 职场文书
责任担保书范文
2014/05/21 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
致800米运动员广播稿（10篇）
2014/10/17 职场文书
餐饮店长岗位职责
2015/04/14 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
实用求职信模板范文
2019/05/13 职场文书