如何样让些菜单能够互相排斥的展开呢

怎么样让些菜单能够互相排斥的展开呢
代码如下面：研究了一会，想不出来，来这里集思广益。
主要是实现菜单的排斥，也就是很多个菜单项，只能点开一个，刚开始是不展开的，然后点一个菜单项展开一个（只有二级菜单），全部的菜单项只展开一个。还有，这个页面有错误的，为什么点有些菜单项目的时候，会导致其他菜单项的丢失，页面上就没有了，不懂。
<html>
<head>
<title> Left </title>
<link rel= "stylesheet " href= "css/css.css " type= "text/css ">
<style>

</style>

<script language= "JavaScript1.2 ">
function change(){
if(!document.all)
return
if (event.srcElement.id== "foldheader ") {
var srcIndex = event.srcElement.sourceIndex
var nested = document.all[srcIndex+1]
if (nested.style.display== "none ") {
nested.style.display= 'block '
event.srcElement.style.listStyleImage= "url(min1.gif) "
}
else {
nested.style.display= "none "
event.srcElement.style.listStyleImage= "url(plus1.gif) "
}
}
//alert(srcIndex)
}

document.onclick=change

//-->
</script>

</head>
<body bgcolor= "#69e90a " text= "#000000 " leftmargin= "30 " topmargin= "0 ">
<nobr>

<ul>
<li id= "foldheader "> 商学院1 </li>
<ul id= "foldinglist " style= "display:none ">

<li> <a href= "send.jsp?groupid=100 " target= "_top "> 公共信息 </a> </li>
<li id= "foldheader "> kdk </li>

</ul>
<li id= "foldheader "> 商学院5 </li>
<ul id= "foldinglist " style= "display:none " >
<li> <a href= "send.jsp?groupid=100 " target= "_top "> 公共信息 </a> </li>
<li id= "foldheader "> kdk </li>

</ul>
<li id= "foldheader "> 商学院6 </li>
<ul id= "foldinglist " style= "display:none " >
<li> <a href= "send.jsp?groupid=100 " target= "_top "> 公共信息 </a> </li>
<li id= "foldheader "> kdk </li>

</ul>
</ul>

</nobr>

</body>
</html>

大家帮忙参考一下！

[解决办法]
分和问题不相配
[解决办法]
是不是outlook的效果?
------解决方案--------------------

没细看.点一个菜单使他展开之前,先将所有的菜单关闭.
[解决办法]
用AJAX实现。

如何样让些菜单能够互相排斥的展开呢

热点推荐