<!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实现标签折叠的解决方法。
参考以下代码：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0
padding: 0
}
#parent >li> span{background: #999999display: blockwidth: 200pxborder:1px solid #ECEEF2}
li {line-height: 40pxdisplay: block}
li p{
display: inline-block
width: 0px
height: 0px
border-left: 5px solid transparent
border-right: 5px solid transparent
border-top: 5px solid#2f2f2f
}
li>ul{display: none}
li>ul>li{border: 1px solid #DEDEDEwidth: 199px}
#parent span:hover + ul{display: block}
#parent span:hover >p{
display: inline-block
width: 0px
height: 0px
border-top: 5px solid transparent
border-bottom: 5px solid transparent
border-left: 5px solid#2f2f2f}
</style>
</head>
<body>
<ul id="parent">
<li>
<span><p></p>列表</span>
<ul>
<li>子列表</li>
<li>子列表</li>
<li>子列表</li>
</ul>
</li>
<li>
<span><p></p>列表</span>
<ul>
<li>子列表</li>
<li>子列表</li>
<li>子列表</li>
</ul>
</li>
<li>
<span><p></p>列表</span>
<ul>
<li>子列表</li>
<li>子列表</li>
<li>子列表</li>
</ul>
</li>
</ul>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）