使用CSS實現內容展開功能

先看看**↓↓↓

html部分

div

class

="introduce"

input

type

="checkbox"

id="introduce"

p>影片講述了職業殺手亞瑟為解救愛人不得不完成一系列不可能的暗殺任務。

在一樁看似意外的事件中，亞瑟·畢索（傑森·斯坦森飾）的紅顏知己梅（楊紫瓊飾）

請求亞瑟解救屢遭毒打的神秘女子吉娜（傑西卡·阿爾芭飾）。影片講述了職業殺手

亞瑟為解救愛人不得不完成一系列不可能的暗殺任務。在一樁看似意外的事件中，亞

瑟·畢索（傑森·斯坦森飾）的紅顏知己梅（楊紫瓊飾）請求亞瑟解救屢遭毒打的神

秘女子吉娜（傑西卡·阿爾芭飾）。

label

for="introduce"

img

src="../img/movie_p_arrows.png"

alt=""

label

div>

css部分

<
style
>
.introduce
.introduce p
#introduce:checked + p
#introduce:checked ~ label[for="introduce"] img
.introduce label
#introduce
style
>

效果展示↓↓↓

展開前

展開後

html部分講解：給內容部分前面加乙個核取方塊控制項（想要實現展開後能收回，一定要用核取方塊哦），後面加乙個label標籤，label通過核取方塊的id進行關聯，當點選label時會選中核取方塊控制項，可在css中通過偽類選擇器:checked對其選中後的狀態進行控制（取消選中當然就收回啦）~

css部分講解：首先給內容部分設定乙個固定高度和overflow: hidden，隱藏一部分文字；然後設定當控制項被選中後內容部分height: auto，實現展開，並且將箭頭旋轉180度，展現出可收回狀態；最後要記得把核取方塊控制項隱藏掉哦（畢竟影響布局23333），效果相當完美誒~

這個思路是不是超棒！為想出這個方法的大佬瘋狂打call！！！（獻上膝蓋orz）