如何实现移动端点击下拉箭头显示全部文字

Posted 2020-10-12 huangrui

html代码：

<input type="checkbox" id="dianji" class="dianji-input">
<div class="movie-text">
    内容（省略）
</div>
<div class="label-box">
    <label for="dianji">
        <img src="../img/100.gif"  class="dianji-icon">
    </label>
</div>

CSS代码：

#dianji:checked+div{
    height: auto;
}
.label-box{
    width: 9.92rem;
    margin:0 auto;
    text-align: center;
    /**/
}
.dianji-icon{
    transform: rotate(90deg);
}
#dianji:checked~.label-box>label[for="dianji"]>img{
    transform: rotate(270deg);
}
.dianji-icon{
    height: 0.61rem;
    width: 0.45rem;
}
.dianji-input{
    display: none;
}
主要是选择器要选中正确的对象！