原demo地址：http://www.thecssninja.com/demo/css_accordion/
ie9由于不支持css3的transition，所以面板下拉和收起的时候不是缓慢的动画效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="_styles.css" media="screen" />
<title>Accordion effect using CSS | The CSS Ninja</title>
</head>
<body>
<dl>
<dt><a href="#Section1">Section 1</a></dt>
<dd id="Section1">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
</p>
</dd>
<dt><a href="#Section2">Section 2</a></dt>
<dd id="Section2">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
</p>
</dd>
<dt><a href="#Section3">Section 3</a></dt>
<dd id="Section3">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
</p>
</dd>
<dt><a href="#Section4">Section 4</a></dt>
<dd id="Section4">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur, ante non iaculis suscipit, massa tortor dictum massa, mattis iaculis massa odio sit amet ipsum. Integer posuere enim ac felis feugiat auctor. Ut urna dui, mollis hendrerit fermentum non, lacinia non enim. Vestibulum lacus risus, tempor vel egestas at, laoreet id tortor. Cras augue sapien, cursus in facilisis id, bibendum a enim. Curabitur semper ligula et ligula aliquet scelerisque. Nunc quis aliquet sem. Duis a rhoncus enim. Integer lacinia, mi.
</p>
</dd>
</dl>
</body>
</html>
_styles.css
/* Just some base styles not needed for example to function */
*, html { font-family: Verdana, Arial, Helvetica, sans-serif; }
body, form, ul, li, p, h1, h2, h3, h4, h5
{
margin: 0;
padding: 0;
}
body { padding: 60px 0 0; background-color: #606061; }
img { border: none; }
p
{
font-size: 1em;
margin: 0 0 1em 0;
}
html { font-size: 100%; height: 100%; /* IE hack */ }
body { font-size: 0.75em; } /* Base font 12px */
table { font-size: 100%; /* IE hack */ }
input, select, textarea, th, td { font-size:1em; }
/* CSS Accordion styles */
dl
{
padding: 10px;
min-width: 960px;
}
dl dt
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #cccccc;
margin: 0;
}
dl dt a
{
color: #ffffff;
font-weight: bold;
text-decoration: none;
padding: 10px;
display: block;
}
dl dt + dd:first-child { height: auto; }
dl dd
{
color: #cccccc;
margin: 0;
overflow: hidden;
transition: height 1s ease;
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
}
dl dd p
{
padding: 10px;
margin: 0;
}
dl dd:not(:target) { height: 0; }
dl dd:target { height: 6.667em; }
dl a.ie:hover dd,
dl a.ie:focus dd
{
height: auto;
color: #cccccc !important;
}
效果图：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
