JavaScript 结合 CSS Div编写折叠菜单中的二级菜单

.aspx文件

    <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文件

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>

*{
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