javascript - jq 固定高度文字展開收起
問題描述
<p class='text'><p class='desc'>目木家居旗艦店，專注家居二十年。我們彰顯個性，具有濃郁現代感現代風格家居設計的特色是，其設計的元素、材料都很單一，這種設計風格已經成為越來越多時尚潮人裝修的首選，現代風格家居設計從整體到局部、從空間到室內陳設塑造，精雕細琢，給人一絲不茍的印象</p><a href='javascript:void(0);' class='more'>更多</a> </p>
這樣的效果該如何實現，收起展開箭頭有變化試著寫了下效果 貌似不太理想，因為這里寫的高度是個固定的，但是這個文字的多少是不確定的demo
問題解答
回答1：直接在p外層包上一層，外層overflow隱藏，獲取p的高度設置即可；注意p的默認margin，下面例子用父元素的padding抵消；
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>Title</title> <link rel='stylesheet' type='text/css'> <style>.text{ line-height: 1.8; margin:0 auto; width: 500px;}.text .desc{ height:50px; padding: 20px 0; overflow: hidden;}.iconfont{ width: 100%; font-size: 20px; text-align: center; cursor: pointer;} </style></head><body><p class='text'> <p class='desc'> <p class='desc-content'>目木家居旗艦店，專注家居二十年。我們彰顯個性，具有濃郁現代感現代風格家居設計的特色是，其設計的元素、材料都很單一，這種設計風格已經成為越來越多時尚潮人裝修的首選，現代風格家居設計從整體到局部、從空間到室內陳設塑造，精雕細琢，給人一絲不茍的印象目木家居旗艦店，專注家居二十年。我們彰顯個性，具有濃郁現代感現代風格家居設計的特色是，其設計的元素、材料都很單一，這種設計風格已經成為越來越多時尚潮人裝修的首選，現代風格家居設計從整體到局部、從空間到室內陳設塑造，精雕細琢，給人一絲不茍的印象目木家居旗艦店，專注家居二十年。我們彰顯個性，具有濃郁現代感現代風格家居設計的特色是，其設計的元素、材料都很單一，這種設計風格已經成為越來越多時尚潮人裝修的首選，現代風格家居設計從整體到局部、從空間到室內陳設塑造，精雕細琢，給人一絲不茍的印象目木家居旗艦店，專注家居二十年。我們彰顯個性，具有濃郁現代感現代風格家居設計的特色是，其設計的元素、材料都很單一，這種設計風格已經成為越來越多時尚潮人裝修的首選，現代風格家居設計從整體到局部、從空間到室內陳設塑造，精雕細琢，給人一絲不茍的印象</p> </p> <p href='javascript:void(0);' class='iconfont icon-unfold'></p></p><script src='http://libs.baidu.com/jquery/2.0.0/jquery.min.js'></script><script> $(document).ready(function() {$('.text').off(’click’).on(’click’,’.icon-unfold’, function () { $('.desc').animate({height: $(’.desc-content’).height()}, 'slow'); $(this).removeClass(’icon-unfold icon-fold’).addClass(’icon-fold’);}).on(’click’,’.icon-fold’, function () { $('.desc').animate({height: ’50px’}, 'normal'); $(this).removeClass(’icon-fold icon-unfold’).addClass(’icon-unfold’);}); })</script></body></html>
其實挺簡單的：如果你要根據文字數量來展開或者收縮，那么你就根據文字的length來設定判斷條件,當長度小于的時候format一份html，這個html上面沒有圖標，當長度大于規定長度時，收縮時，對所有文字字符串進行截取然后拼接一個展開的圖標，這個font-awesome上面有很多，就對應然后展示到頁面上，然后展開也是一樣的套路，只不過不用截取字符串了，就把所有字符串拼接一個收縮的圖標即可，然后分別在兩個圖標上面綁定事件，我在下面給了我之前實現的具體例子，代碼不全，給你提供思路及實現應該是足夠了
function format_html_collapse(info) { var expand_html = ’<a href='http://www.cgvv.com.cn/wenda/5605.html#' class='click_expand'>...點擊展開 ></a>’; if (info.content.length > info.max_length) {info.content = info.content.substring(0, info.max_length) + expand_html; } return info.content;}function format_html_expand(info) { var collapse_html = ’<a href='http://www.cgvv.com.cn/wenda/5605.html#' class='click_collapse'>...點擊收起 ></a>’; if (info.content.length > info.max_length) {info.content = info.content + collapse_html; } return info.content;}function to_collapse(wtable) { $(’.click_collapse’).on(’click’, function(e) { xxx.html(format_html_collapse(fc_value)); }); to_expand(wtable); });} function to_expand(wtable) { $(’.click_expand’).on(’click’, function(e) {// 此處省略部分代碼fe_value.td.html(format_html_expand(fe_value)); }); to_collapse(wtable);}); 回答3：
動畫的話，試試這個：demo
前幾天看了 @姑奶奶 的回答（這里）受到了一些啟發。重點在于：不定高度的情況下的展開，先將高度設置為auto，再使用getComputedStyle獲取到高度，然后設置高度為0，在使用獲取到的高度去做動畫。
相關文章：
1. [前端求職必看]前端開發面試題與答案精選_擴展問題2. javascript - 在top.jsp點擊退出按鈕后，right.jsp進行頁面跳轉，跳轉到login.jsp3. javascript - 下面的這段算法代碼求解釋4. mac連接阿里云docker集群，已經卡了2天了，求問？5. css3 - 在sublime text里， 如何讓emmet生成的帶前綴css屬性垂直對齊？6. javascript - js 有什么優雅的辦法實現在同時打開的兩個標簽頁間相互通信？7. java - spring-data Jpa 不需要執行save 語句，Set字段就可以自動執行保存的方法？求解8. android - 哪位大神知道java后臺的api接口的對象傳到前端后輸入日期報錯，是什么情況？求大神指點9. javascript - angular中如何創建一個能被不同模塊中組件都能訪問其屬性和方法的對象10. 想找個php大神仿個網站。
網公網安備