<!DOCTYPE html>
<html><head><meta charset="gb2312"> <title>jqurey折叠菜单</title> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script></head><body><!-- 折叠菜单开始 --><div ><button id="btn_packinglist">显示列表</button> </div><!-- 列表项 --><div class="item">子菜单</div><div class="sub_item" >副菜单</div><!-- 列表项 --><div class="item">子菜单</div><div class="sub_item" >副菜单</div><!-- 列表项 --><div class="item">子菜单</div><div class="sub_item" >副菜单</div><!-- 列表项 --><div class="item">子菜单</div><div class="sub_item" >副菜单</div><!-- 列表项 --><div class="item">子菜单</div><div class="sub_item" >副菜单</div><style>.item { width:250px;height:80px;display:none;background-color:#949494;}.sub_item{ width:250px;height:80px;display:none;background-color:#E4E4E4;}#btn_packinglist{ width:250px;height:80px;}</style><script type="text/javascript">$("#btn_packinglist").click(function(){ $(".item").slideToggle("fast");$(".sub_item").hide();});$(".item").click(function(){ $(this).next().slideToggle("fast");$(".item").not(this).next().slideUp();});</script><!-- 折叠菜单结束 --></body></html>