用html和css实现标签折叠，代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>用html和css实现标签折叠</title>
</head>
<body>
<ul id="fm">
<li><a href="#"><h1>折叠标签A</h1>
<span>这里是描述标签A</span>
<span>这里是描述标签A</span>
<span>这里是描述标签A</span>
</a></li>
<li><a href="#"><h1>折叠标签B</h1>
<span>这里是描述标签B</span>
<span>这里是描述标签B</span>
<span>这里是描述标签B</span></a>
<li><a href="#"><h1>折叠标签C</h1>
<span>这里是描述标签C</span>
<span>这里是描述标签C</span>
<span>这里是描述标签C</span></a>
<li><a href="#"><h1>折叠标签D</h1>
<span>这里是描述标签D</span>
<span>这里是描述标签D</span>
<span>这里是描述标签D</span></a>
</ul>
</body>
</html>
CSS样式为：
<style type="text/css">
#fm{
overflow:hidden
background-color:#FFCCCC
width:200px
height:500px
overflow:hidden
}
#fm h1{
margin:0px
color:#FF3333
font-size:14px
}
#fm li{
list-sytle-type:none
display:block
width:178px
border:1px solid #00CCCC
border-bottom-width:0px
}
#fm li.end{
border-bottom-width:1px
}
#fm li a{
display:block
text-decoration:none
width:100%
padding:10px
}
#fm li a span{
display:none
color:#000000
font-size:12px
padding-top:10px
}
#fm li a:hover{
background:#fff
}
#fm li a:hover span{
display:block
cursor:hand
}
</style>
效果如图：
以上就是用html和css实现标签折叠的解决方法。
<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条）