JS 实现收缩列表

html:代码

<div id="menu-container">
			<h1>新闻管理</h1>
			<ul>
				<li>发布新闻</li>
				<li>新闻列表</li>
				<li>回收站</li>
			</ul>
			<h1>广告管理</h1>
			<ul>
				<li>发布新闻</li>
				<li>新闻列表</li>
				<li>回收站</li>
			</ul>
			<h1>模板管理</h1>
			<ul>
				<li>发布新闻</li>
				<li>新闻列表</li>
				<li>回收站</li>
			</ul>
		</div>

css：

<style type="text/css">
			body,p,div,h1,h2,h3,h4,h5,h6,ul,ol{
				margin: 0;
				padding: 0;
			}
			ul,ol{
				list-style: none;
			}
			body{
				font:14px/24px "microsoft yahei";
			}
			#menu-container{
				width: 200px;
				padding: 5px;
				margin: 0 auto;
				border:1px solid #ccc;
			}
			#menu-container h1{
				font-size:16px;
				line-height: 30px;
				cursor: pointer;
			}
			#menu-container ul{
				margin-left:10px;				
			}
			#menu-container li{
				padding:5px 0;
			}
		</style>

JS：

<script src="scripts/jquery-1.10.0.min.js"></script>
		<script>
			$(function(){
				$('ul:not(:first)').hide();//ul节点  不是第一个的就隐藏
				$('h1').click(function(){
					$(this).next().slideToggle().siblings('ul').slideUp(200);
				})	//$(this).next()当前节点的下一个节点
			})		//slideToggle()如果是展开状态就收缩，如果是收缩状态就展开
					//siblings('ul')  ul的兄弟节点
					//slideUp(200)收缩速度
		</script>	

JQuery  不要忘啦引入，不然就不灵啦