使用CSS实现内容展开功能

先看看代码↓↓↓

HTML部分

<div class="introduce">
    <input type="checkbox" id="introduce">
    <p>影片讲述了职业杀手亚瑟为解救爱人不得不完成一系列不可能的暗杀任务。
　　在一桩看似意外的事件中，亚瑟·毕索（杰森·斯坦森 饰）的红颜知己梅（杨紫琼 饰）
　　请求亚瑟解救屡遭毒打的神秘女子吉娜（杰西卡·阿尔芭 饰）。影片讲述了职业杀手
　　亚瑟为解救爱人不得不完成一系列不可能的暗杀任务。在一桩看似意外的事件中，亚
　　瑟·毕索（杰森·斯坦森 饰）的红颜知己梅（杨紫琼 饰）请求亚瑟解救屡遭毒打的神
　　秘女子吉娜（杰西卡·阿尔芭 饰）。</p>
    <label for="introduce"><img src="../img/movie_p_arrows.png" alt=""></label>
</div>

CSS部分

<style>
.introduce{
    background: #fff;
    font-size: .44rem;
    line-height: .7rem;
    padding: .4rem;
    margin-bottom: .5rem;
}
.introduce p{
    height: 2.2rem;
    overflow: hidden;
}
#introduce:checked + p{
    height: auto;
}
#introduce:checked ~ label[for="introduce"] img{
    transform: rotate(180deg);
 }
.introduce label{
    width: .48rem;
    display: block;
    margin: auto;
    cursor: pointer;
}
#introduce{
    display:none;
}
</style>

效果展示↓↓↓

展开前

展开后

HTML部分讲解：给内容部分前面加一个复选框控件（想要实现展开后能收回，一定要用复选框哦），后面加一个label标签，label通过复选框的id进行关联，当点击label时会选中复选框控件，可在CSS中通过伪类选择器:checked对其选中后的状态进行控制（取消选中当然就收回啦）~

CSS部分讲解：首先给内容部分设置一个固定高度和overflow: hidden，隐藏一部分文字；然后设置当控件被选中后内容部分height: auto，实现展开，并且将箭头旋转180度，展现出可收回状态；最后要记得把复选框控件隐藏掉哦（毕竟影响布局23333），效果相当完美诶~

这个思路是不是超棒！为想出这个方法的大佬疯狂打call！！！（献上膝盖Orz）