- 实现效果如图
2. 代码
<div class="accoradion">
<input type="radio" id="collapse1" name="tap-input" hidden />
<input type="radio" id="collapse2" name="tap-input" hidden />
<input type="radio" id="collapse3" name="tap-input" hidden />
<article>
<label for="collapse1">列表1</label>
<p>内容1</p><p>内容2</p><p>内容3</p>
</article>
<article>
<label for="collapse2">列表2</label>
<p>内容1</p><p>内容2</p><p>内容3</p>
</article>
<article>
<label for="collapse3">列表3</label>
<p>内容1</p><p>内容2</p><p>内容3</p>
</article>
</div>
<style>
.accoradion{
width: 300px;
}
.accoradion article{
cursor: pointer;
}
label {
display: block;
padding: 0 20px;
height: 40px;
background-color: #f66;
cursor: pointer;
line-height: 40px;
font-size: 16px;
color: #fff;
}
p{
overflow: hidden;
padding: 0 20px;
margin: 0;
border: 1px solid #f66;
border-top:none;
border-bottom-width: 0;
max-height: 0;
line-height:30px;
transition: all .5s ease;
}
input:nth-child(1):checked ~ article:nth-of-type(1) p,
input:nth-child(2):checked ~ article:nth-of-type(2) p,
input:nth-child(3):checked ~ article:nth-of-type(3) p {
max-height: 130px;
border-bottom-width: 1px;
}
</style>