Question

用javascript写一个单击菜单展开子菜单，单击其他菜单关闭已展开的子菜单，展开当前菜单的子菜单

菜单容器是这样的不能改变。
<div class="">
<ul class="menu">
<li><a>菜单1</a></li>
<li><a>菜单2</a></li>
<ul class="sub-menu">
<li><a>子菜单2-1</a></li>
<li><a>子菜单2-1</a></li>
</ul>
<li><a>菜单3</a></li>
<li><a>菜单4</a></li>
</ul>
</div>

Answer 1

<style>
.menu{bgcolor:#000;width:100px;height:100px;border:1px solid #000}
</style>
<div>
<h2 onclick=menu(1)>1</h2><div class="menu" id="menu_1" style="none"></div>
<h2 onclick=menu(2)>2</h2><div class="menu" id="menu_2" style="none"></div>
<h2 onclick=menu(3)>3</h2><div class="menu" id="menu_3" style="none"></div>
<h2 onclick=menu(4)>4</h2><div class="menu" id="menu_4" style="none"></div>
</div>
<script>
function menu(i)
switch(i){
case 1:
document.getElementById("menu_1").style="block";
document.getElementById("menu_2").style="none";
document.getElementById("menu_3").style="none";
document.getElementById("menu_4").style="none";
break;
case 2:
document.getElementById("menu_1").style="none";
document.getElementById("menu_2").style="block";
document.getElementById("menu_3").style="none";
document.getElementById("menu_4").style="none";
break;
case 3:
document.getElementById("menu_1").style="none";
document.getElementById("menu_2").style="none";
document.getElementById("menu_3").style="block";
document.getElementById("menu_4").style="none";
break;
case 4:
document.getElementById("menu_1").style="none";
document.getElementById("menu_2").style="none";
document.getElementById("menu_3").style="none";
document.getElementById("menu_4").style="block";
}
</script>
估计不怎么好看，要好看就是css的问题了

追问

呵呵。直接抄了一份过来。这个我已经看过了。而且我还不会改js里面的id啊class什么的。

Answer 2

我发给你私信聊