Question

html :二级菜单：点击第一级时，展开下面的子菜单，每次只有一个一级菜单展开：

<div> --一级菜单的div
<div> --二级菜单的div
<ul>----二级菜单的内容
<li></li>
<li></li>
</ul>
</div>
</div>

Answer 1

html:
<ul class="UL">
<li class="item">
一级菜单1
<ul class="UL2">
<li>二级菜单1</li>
<li>二级菜单2</li>
</ul>
</li>
<li class="item">
一级菜单2
<ul class="UL2">
<li>二级菜单1</li>
<li>二级菜单2</li>
</ul>
</li>
<li class="item">
一级菜单3
<ul class="UL2">
<li>二级菜单1</li>
<li>二级菜单2</li>
</ul>
</li>
</ul>

css:
<style type="text/css">
body,ul{margin: 0; padding: 0;}
ul{list-style: none;}
.UL{width: 100px; text-align: center;}
.UL2{font-size: 13px; width: 100px; color: #00a0e9; display: none;}
</style>

JQ:
<script type="text/javascript">
$(document).ready(function() {
$(".item").click(function(){
$(this).find(".UL2").slideToggle();
$(this).siblings('.item').find('.UL2').slideUp();
});
});

</script>