- <!DOCTYPE html>
- <html>
- <head>
- <title>Accordion</title>
- <meta charset="utf-8">
- <script type="text/javascript" src="../js/jquery.js"></script>
- <style type="text/CSS">
- .accordionMenu{
- background: #fff;
- color:#424242;
- font:12px Arial,Verdana,sans-serif;
- margin : 0 auto;
- padding: 10px;
- width: 500px;
- }
- .accordionMenu h2{
- margin:5px 0;
- padding :0;
- position: relative;
- }
- .accordionMenu h2:before{
- border:5px solid #fff;
- content: "";
- border-color:#fff transparent transparent;
- height: 0;
- position: absolute;
- right: 10px;
- top:15px;
- width: 0px;
- }
- .accordionMenu h2 a{
- background: #8f8f8f;
- border-radius: 5px;
- display: block;
- color:#424242;
- font: 13px normal;
- margin: 0px;
- padding: 10px 10px;
- text-decoration: none;
- }
- .accordionMenu p{
- margin:0;
- height: 0px;
- overflow: hidden;
- padding: 0px 10px;
- transition:height 0.5s ease-in;
- }
- .accordionMenu :target p{
- height: 100px;
- overflow: auto;
- }
- .accordionMenu :target h2:before{
- border-color: transparent transparent
- transparent #fff ;
- }
- </style>
- </head>
- <body>
- <div class="accordionMenu">
- <div class="menuSection" id="brand">
- <h2><a href="#brand">Brand</a></h2>
- <p>Lorem isfaf </p>
- </div>
- <div class="menuSection" id="promotion">
- <h2><a href="#promotion">Promotion</a></h2>
- <p>Lornasdfa sdfasdfa</p>
- </div>
- <div class="menuSection" id="event">
- <h2><a href="#event">Event</a></h2>
- <p>Loarfeafsadf </p>
- </div>
- </div>
- <script type="text/javascript">
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/23531/d43e6e64689ced474edcac53a10b6cee.html