純css的accordion效果(代碼分享)

發(fā)布時(shí)間：2011-10-30 10:59:22 作者：佚名

類似的例子網(wǎng)上也有，感興趣的同學(xué)可以去google，這里我自己試著去實(shí)現(xiàn)一個(gè)，其實(shí)很簡單，主要是用到了css3中的:target偽類和transition效果.

css中注意下:target和transition部分就大致清楚了.代碼中css的prefix為了簡明只用了-moz-:target定位的元素對應(yīng)于瀏覽器url最后的#xxx,xxx是元素的id,我們通過點(diǎn)擊標(biāo)題鏈接實(shí)現(xiàn)切換功能。以下是jsfiddle中得實(shí)際效果（firefox瀏覽或者修改css前綴）

復(fù)制代碼

代碼如下:

<div class="accordion">
<div class="item">
<h3 class="title round">
<a href="#one">title one</a>
</h3>
<div id="one" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p>
</div>
</div>
<div class="item">
<h3 class="title round">
<a href="#two">title two</a>
</h3>
<div id="two" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p>
</div>
</div>
<div class="item">
<h3 class="title round">
<a href="#three">title three</a>
</h3>
<div id="three" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p>
</div>
</div>
</div><div class="accordion">
<div class="item">
<h3 class="title round">
<a href="#one">title one</a>
</h3>
<div id="one" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p>
</div>
</div>
<div class="item">
<h3 class="title round">
<a href="#two">title two</a>
</h3>
<div id="two" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p>
</div>
</div>
<div class="item">
<h3 class="title round">
<a href="#three">title three</a>
</h3>
<div id="three" class="content round">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in </p>
</div>
</div>
</div>

css:

復(fù)制代碼

代碼如下:

.round {
border-radius: 5px;
}
.accordion {
width: 500px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
padding: 5px;
border: 5px solid rgba(54,54,54,0.3);
position: absolute;
top: 20px;
left: 50px;
}
.accordion .item {
margin-bottom: 5px;
}
.accordion .item:last-child {
margin-bottom: 0;
}
.accordion .title {
background:-moz-linear-gradient(top, #eee, #dcdcdc, #dcdcdc, #dcdcdc);
}
.accordion .title > a{
height: 30px;
display:block;
line-height: 30px;
padding-left: 10px;
font-size: 15px;
color: #585858;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
text-decoration:none;
}
.accordion .title+.content {
height: 0;
padding: 0;
opacity: 0;
border: 1px solid #eee;
overflow-y: auto;
-moz-transition: all 0.2s linear;
}
.accordion .title+.content:target {
opacity: 1;
padding: 5px;
height: auto;
margin: 5px auto;
}
.accordion .content p {
margin-bottom: 5px;
color: #585858;
text-shadow: 0 1px 1px #dcdcdc;
}