HTML如何实现展开式菜单(实现效果:点击一项展开子菜单,点击另一项展开此项子菜单同时关闭前一项子菜单)

<div id="main1" style="color:blue"

onclick="document.all.child1.style.display='none'document.all.child2.style.

display='none'document.all.child1.style.display=

(document.all.child1.style.display=='none')?'':'none'">经济贸易学院

</div></a>

<div id="child1" style="display:none">

<a href="./zy-dzsw.html" target="zynr">电子商务</a><br>

<a href="./zy-scyx.html" target="zynr">市场营销</a><br>

<a href="#">国际贸易实务</a><br>

</div>

<a href="#"><div id="main2" style="color:blue"

onclick="document.all.child1.style.display='none'document.all.child2.style.

display='none'document.all.child2.style.display=

(document.all.child2.style.display=='none')?'':'none'">交通与信息学院

</div></a>

<div id="child2" style="display:none">

<a href="#">计算机网络技术</a><br>

<a href="#">移动通信</a><br>

<a href="#">计算机系统维护</a><br>

</div>

</div>

在你的onclick事件中加上document.all.child1.style.display='none'document.all.child2.style.display='none'就可以了

<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: 0padding: 0}

ul{list-style: none}

.UL{width: 100pxtext-align: center}

.UL2{font-size: 13pxwidth: 100pxcolor: #00a0e9display: none}

</style>

JQ:

<script type="text/javascript">

$(document).ready(function() {

$(".item").click(function(){

$(this).find(".UL2").slideToggle()

$(this).siblings('.item').find('.UL2').slideUp()

})

})

</script>