css3可折叠式/手风琴式面板(ie8及以下不兼容)

原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;
	}


效果图:


css3可折叠式/手风琴式面板(ie8及以下不兼容)_第1张图片

你可能感兴趣的:(css3,按钮,button,可折叠面板,手风琴面板)