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  不要忘啦引入，不然就不靈啦