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

本文主要是介绍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;}

效果图：