<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>
<table border="0" cellspacing="0" cellpadding="0"><tr>
<td scope="row"><table border="1">
<tr>
<td id="showbfq" height="20" align="top" onclick="if(bfq.style.display=='none'){bfq.style.display=''showbfq.innerText='优质'}
else{bfq.style.display='none'showbfq.innerText='点击更多'}">点击更多</td>
</tr>
<tr>
<td height="80" align="center" name="bfq" id="bfq" style="display:none">aaa</td>
</tr>
</table></td></tr>
<tr><td><table border="1">
<tr>
<td id="showbfq1" height="20" align="top" onclick="if(bfq1.style.display=='none'){bfq1.style.display=''showbfq1.innerText='优质'}
else{bfq1.style.display='none'showbfq1.innerText='点击更多'}">点击更多</td>
</tr>
<tr>
<td height="80" align="center" name="bfq1" id="bfq1" style="display:none">bbb</td>
</tr>
</table></td></tr>
<tr><td><table border="1">
<tr>
<td id="showbfq2" height="20" align="top" onclick="if(bfq2.style.display=='none'){bfq2.style.display=''showbfq2.innerText='优质'}
else{bfq2.style.display='none'showbfq2.innerText='点击更多'}">点击更多</td>
</tr>
<tr>
<td height="80" align="center" name="bfq2" id="bfq2" style="display:none">ccc</td>
</tr>
</table></td></tr>
</table>
一样的，用一个大表格，把它们竖向的框起来。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）