HTML代码
<section id="first">
<h3><a href="#first">我关注的人</a></h3>
<p>内容1</p>
</section>
<section id="second">
<h3><a href="#second">关注我的人</a></h3>
<p>内容2</p>
</section>
<section id="last">
<h3><a href="#last">我的提问列表</a></h3>
<p>内容3</p>
</section>
CSS的代码
section{
width:200px;
border:1px solid #ccc;
border-radius: 5px;
margin-bottom: 5px;
}
section h3{
height:30px;
line-height: 30px;
text-indent: 30px;
position: relative;
background: #ccc;
}
section h3:before{
border:4px solid #000;
border-color:transparent transparent transparent #000 ;
content:'';
height:0;
position: absolute;
width:0;
top:12px;
left:10px;
}
section h3 a{
display: block;
color:#333;
text-decoration: none;
font-weight: normal;
outline: none;
}
section p{
font-size:14px;
height:0;
overflow:hidden;
transition: height 0.5s ease-in;
}
:target{
padding-top: 2px;
}
:target h3{
border-bottom: 1px solid #ccc;
background: #fff;
}
:target h3:before{
border-color:#000 transparent transparent transparent;
}
:target p{
padding:15px 0 0 20px;
height:170px;
overflow:auto;
}
我想要的效果是第一项的section的元素是自动展开的，但不知道如何做，请高手指教。