文字展開折疊效果很常見,實現方法也有很多種,在這里記錄是因為覺得這個方法是自己所使用的方法中最簡單的一個,之后如果有其方法會添加進來,故在此進行總結。
實現效果:
實現思路:之前習慣的思路總是想要固定高度,通過點擊控制盒子的高度來實現這個效果,但是很不靈活,而且樣式上也會有問題。現在的想法習慣上不為元素設置寬高,讓元素中的內容自動把盒子撐起來,利用元素的超出兩行顯示...屬性來實現,把這個樣式設置為一個單獨的樣式類,使用底部折疊icon的點擊時間來控制是否為元素添加此類,這樣實現很靈活,無論展開字數多少,也不用考慮高度問題。
代碼實現(直接用的項目中的代碼截圖,項目基於Vue框架):