体彩排列5双期走势图

站长网_站长创业_站长主页_站长之家_易采站长站

会员投稿 投稿指南 站长资讯通告: JS三级可折叠菜单实现方法
搜索:
您的位置: 主页 > 教程 > 网页编程 > JavaScript > » 正文

JS三级可折叠菜单实现方法

来源: 易采站长站

本文实例讲述了JS三级可折叠菜单实现方法。分享给大家供大家参考,具体如下:

。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: 600px;
 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;
}
#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')">菜单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,'1')">菜单2</a>
 <ul>
 <li><a href="javascript:void(0);" onclick="doMenu(this,'2')" >菜单2_1</a>
 <ul>
 <li>菜单2_1_1</li>
 <li>菜单2_1_2</li>
 </ul>
 </li>
 <li><a href="javascript:void(0);" onclick="doMenu(this,'2')">菜单2_2</a>
  <ul>
 <li>菜单2_2_1</li>
 </ul>
 </li>
 </ul>
</li>
</ul>
</div>
</form>
</body>
</html>

js文件代码:

function doMenu(obj,strDeep){
 var items=obj.parentNode.getElementsByTagName("ul");
 //获取a 对象你节点li 下包含的 所有ul集合
 var itmUl;
 var deeps=strDeep; //strDeep 为当前菜单的级数
 if(items.length>0){
 itmUl=items[0];
 alert(itmUl);
 }
 if(itmUl.className!="ex"){
 cxAll();//当前节点为关闭状态时,先执行关闭所有ul子菜单
 if(deeps=='2'){ //若要展开三级菜单当,还要将其二级父菜单展开
 itmUl.parentNode.parentNode.className="ex";
 }
 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";
 }
}


            
Tags:
最新图文资讯
1 2 3 4 5 6
体彩排列5双期走势图相关的文章列表:
易采站长站 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助 -
楚天风采22选5和值走势图 体彩排列3跨度走势图 体彩排列5复式拆分 江苏体彩七位数质合走势图 辽宁福彩35选7走势图 体彩排列5双期走势图体彩超级大乐透除八走势图 体彩排列3奇偶分析 河北福彩排列7走势图 体彩超级大乐透周三走势图 江苏体彩七位数201走势图 体彩排列5质合走势图 体彩排列3质合走势图 河北福彩20选5和尾数走势图 齐鲁风采23选5斜三连号分布图 福彩七乐彩双期走势图 辽宁福彩35选7重号分布图 体彩排列5大小走势图 体彩超级大乐透周一走势图 体彩超级大乐透除九走势图 河南22选5和值走势图