关于js下拉菜单的问题

Question

问题是：
当点击按钮即a的时候只有最后一个内容即div隐藏了，其他的没有效果是为什么。
附上代码：
window.onload=function(){
var list=getByClass("menu")[0];
var lis=list.childNodes;
var a,div,li,obj;
for(var i=0;i<lis.length;i++){
if(lis[i].tagName=="LI"){
a=firstChild(lis[i]);
div=next(a);
obj={
btn:a,
item:div
};
a.relatedItem=obj;
div.relatedItem=obj;
a.onmouseover=function(){
this.relatedItem.item.style.display="block";
};
div.onmouseout=function(){
this.style.display="none";
};
a.onmouseout=function(evt){
if(evt.relatedTarget==this.relatedItem.item){
return;
};
this.relatedItem.item.style.display="none";
};
};
};
a.onclick=function(){
this.relatedItem.item.style.display="none";
};
};
其中firstChild、next两个函数是指第一个子节点和下一个子节点，都可正常访问。
问题是a.onclick=function(){
this.relatedItem.item.style.display="none";
};
只能是最后一个列表点击是隐藏，前两个无法隐藏。
html结构如下：
<ul class="menu">
<li>
<a href="###">按钮A</a>
<div>内容A</div>
</li>
<li>
<a href="###">按钮B</a>
<div>内容B</div>
</li>
<li>
<a href="###">按钮C</a>
<div>内容C</div>
</li>
</ul>

Answer 1

<ul class="menu">
<li>
<a href="###" onclick="a_click(event);">按钮A</a>
<div>内容A</div>
</li>
<li>
<a href="###" onclick="a_click(event);">按钮B</a>
<div>内容B</div>
</li>
<li>
<a href="###" onclick="a_click(event);">按钮C</a>
<div>内容C</div>
</li>
</ul>
<script>function a_click(event){
 var obj = event.srcElement ? event.srcElement : event.target; 
obj.style.display="none";
}
</script>
这个试试

Answer 2

//【恕直言】需求不明确，html结构凌乱，js不知所谓
<ul id="menu">
    <li>
        <a href="javascript:void(0)">按钮A</a>
        <div>内容A</div>
    </li>
    <li>
        <a href="javascript:void(0)">按钮B</a>
        <div>内容B</div>
    </li>
    <li>
        <a href="javascript:void(0)">按钮C</a>
        <div>内容C</div>
    </li>
</ul>
<script type="text/javascript">
    var ul=document.getElementById("menu");
    var li=ul.getElementsByTagName("li");
    var div=ul.getElementsByTagName("div");
    var a=ul.getElementsByTagName("a");
    for(var i=0;i<li.length;i++){
        if(i>0)div[i].style.display="none";
        a[i].onclick=(function(x){
            return function(){
                for(var n=0;n<li.length;n++){
                    div[n].style.display="none";
                }
                div[x].style.display="block";
            }
        })(i)
    }
</script>