JavaScript实现菜单

我向实现的效果是当单击Anniversary Balloons时，其下的ul无序列表Love & Romance，Birthdays等等显示出来，不单击不显示。其他类似。麻烦大家帮帮忙写写代码，谢谢大家！<div>
    <ul>
    <li><a href='test.aspx?departmentid=1'>Anniversary Balloons</a>
    <ul>
     <li><a href='test.aspx?Categoryid=1'>Love & Romance</a>

     <li><a href='test.aspx?Categoryid=2'>Birthdays</a>

     <li><a href='test.aspx?Categoryid=3'>Weddings</a>
    </ul>
    </li>

    <li><a href='test.aspx?departmentid=2'>Balloons for Children</a>
    <ul>
     <li><a href='test.aspx?Categoryid=4'>Message Balloons</a>

     <li><a href='test.aspx?Categoryid=5'>Cartoons</a>

     <li><a href='test.aspx?Categoryid=6'>Miscellaneous</a>
    </ul>
    </li>
    <li><a href='test.aspx?departmentid=10'>Books</a>
    <ul>
     <li><a href='test.aspx?Categoryid=15'>Fiction</a>
    </ul>
    </li>
    <li><a href='test.aspx?departmentid=11'>酒类</a>
    <ul>
     <li><a href='test.aspx?Categoryid=17'>红酒</a>
    </ul>
    </li>
    </ul>

    </div>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

效果跟这个http://www.456bereastreet.com/lab/accessible-expanding-collapsing-menu/差不多
给UL设置一个ID吧
onclick
var ul = document.getElementById("ul_id");
if(ul.style.display=="none"){
  ul.style.display = "block";
}else{
  ul.style.display = "none";
}如果是动态生成的菜单，在循环里给LI的onclick和里面的UL设置相应的ID。
直接把他的拿过来用...
<!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>
<style type="text/css" >
#wrap {
width:500px;
margin:1em auto;
}
body {font:76%/1.4 Verdana,sans-serif;}
.menu a {
border:none;
font-weight:normal;
}
.menu,
.menu ul {
margin:0;
padding:0;
list-style:none;
}
.menu {width:200px;}
.menu li {
display:block;
margin:0;
padding:0;
margin-bottom:1px;
}
.menu a {
display:block;
padding:2px 5px;
color:#000;
background:#b0c23d;
text-decoration:none;
}
.menu a:hover,
.menu a:focus,
.menu a:active {background:#d9dcb0;}
.menu ul li {padding-left:15px;}
.menu ul a {background:#ced174;}
.hidden {display:none;}
</style>

<script type="text/javascript">
var toggleMenu = {
init : function(sContainerClass, sHiddenClass) {
if (!document.getElementById || !document.createTextNode) {return;} // Check for DOM support
var arrMenus = this.getElementsByClassName(document, 'ul', sContainerClass);
var arrSubMenus, oSubMenu, oLink;
for (var i = 0; i < arrMenus.length; i++) {
arrSubMenus = arrMenus[i].getElementsByTagName('ul');
for (var j = 0; j < arrSubMenus.length; j++) {
oSubMenu = arrSubMenus[j];
oLink = oSubMenu.parentNode.getElementsByTagName('a')[0];
oLink.onclick = function(){toggleMenu.toggle(this.parentNode.getElementsByTagName('ul')[0], sHiddenClass); return false;}
this.toggle(oSubMenu, sHiddenClass);
}
}
},
toggle : function(el, sHiddenClass) {
var oRegExp = new RegExp("(^|\\s)" + sHiddenClass + "(\\s|$)");
el.className = (oRegExp.test(el.className)) ? el.className.replace(oRegExp, '') : el.className + ' ' + sHiddenClass; // Add or remove the class name that hides the element
},
/* addEvent function from http://www.quirksmode.org/blog/archives/2005/10/_and_the_winner_1.html */
addEvent : function(obj, type, fn) {
if (obj.addEventListener)
obj.addEventListener(type, fn, false);
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() {obj["e"+type+fn](window.event);}
obj.attachEvent("on"+type, obj[type+fn]);
}
},
/*
Written by Jonathan Snook, http://www.snook.ca/jonathan
Add-ons by Robert Nyman, http://www.robertnyman.com
*/
getElementsByClassName : function(oElm, strTagName, strClassName){
    var arrElements = (strTagName == "*" && document.all)? document.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\-/g, "\\-");
    var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}
};
toggleMenu.addEvent(window, 'load', function(){toggleMenu.init('menu','hidden');});
</script>
</head>
<body>
<div id="wrap">
  <ul class="menu">
    <li>
    <a href='test.aspx?departmentid=1'>Anniversary Balloons</a>
      <ul>
        <li><a href='test.aspx?Categoryid=1'>Love & Romance</a>
        <li><a href='test.aspx?Categoryid=2'>Birthdays</a>
        <li><a href='test.aspx?Categoryid=3'>Weddings</a>
      </ul>
    </li>
    <li>
    <a href='test.aspx?departmentid=2'>Balloons for Children</a>
      <ul>
        <li><a href='test.aspx?Categoryid=4'>Message Balloons</a>
        <li><a href='test.aspx?Categoryid=5'>Cartoons</a>
        <li><a href='test.aspx?Categoryid=6'>Miscellaneous</a>
      </ul>
    </li>
    <li>
    <a href='test.aspx?departmentid=10'>Books</a>
      <ul>
        <li><a href='test.aspx?Categoryid=15'>Fiction</a>
      </ul>
    </li>
    <li>
    <a href='test.aspx?departmentid=11'>酒类</a>
      <ul>
        <li><a href='test.aspx?Categoryid=17'>红酒</a>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>