<h1><p>折叠2</p></h1>
<h1><p>折叠3</p></h1>
<h1><p>折叠4</p></h1>
需要js来，最好用jquery来实现
只需要给h1绑定事件，单件它的时候，设置它的p属性，display:none。
1、在网页<head>区添加以下样式定义 ：<style type="text/css">
#dlmenu {height:10em}
#menu {list-style-type:nonemargin:0 0 10pxpadding:0position:absolutewidth:15embackground:#fffz-index:100}
#menu li {display:blockpadding:0margin:0position:relativez-index:100}
#menu li a, #menu li a:visited {display:blocktext-decoration:none}
#menu li dd {display:none}
#menu li:hover, #menu li a:hover {border:0}
#menu li:hover dt a , #menu li a:hover dt a {background:#d4d8bd url(top_grad_2.gif) center centercolor:#ff0}
#menu li:hover dd, #menu li a:hover dd {display:block}
#menu li:hover dl, #menu li a:hover dl {height:20embackground:#b4be9c url(sub_grad.gif)}
#menu table {border-collapse:collapsepadding:0margin:-4pxfont-size:1em}
#menu dl {width: 15emmargin: 0background: #6f9c6fcursor:pointer}
#menu dt {margin:0padding: 0font-size: 1.1emborder-top:1px solid #cce}
#menu dd {margin:0padding:0font-size: 1emtext-align:left}
.gallery dt a, .gallery dt a:visited {display:blockcolor:#fffpadding:5px 5px 5px 10pxbackground:#949e7c url(top_grad.gif) center center}
.gallery dd a, .gallery dd a:visited {color:#000min-height:1emtext-decoration:nonedisplay:blockpadding:4px 5px 4px 20pxbackground:#b4be9c url(sub_grad.gif)}
* html .gallery dd a, * html .gallery dd a:visited {height:1em}
.gallery dd a:hover {background:#7aacolor:#ff0}
</style>
2、在网页<body>区添加菜单HTML代码
<div id="dlmenu">
<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl class="gallery">
<dt><a href="../menu/index.html">DEMOS</a></dt>
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
折叠是一种样式的呈现方式，需要用css结合js来实现。细分逻辑，就是子菜单区域的显示和隐藏，html标签中有个设置显示和隐藏的样式属性：display:none/block
通过js触发，来切换这个属性的值即可实现显示和隐藏效果了。
比如：
定义一个显示、隐藏的方法：
//隐藏
function hideSomething( elem ){
if( elem ){
elem.style.display="none"
}
}
//显示
function showSomething( elem ){
if( elem ){
elem.style.display="block"
}
}
如果你没有前端开发基础，可能有些麻烦，还需要学习一些基础内容。
