发布于 2017-02-20 04:15:32 | 93 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了JS三级可折叠菜单实现方法,以实例形式分析了asp.net结合JavaScript实现三级折叠菜单的相关技巧,涉及JavaScript节点操作实现方法,需要的朋友可以参考下

本文实例讲述了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";
 }
}

希望本文所述对大家JavaScript程序设计有所帮助。



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务