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://m.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://m.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，在使用獲取到的高度去做動畫。
相關文章：
網公網安備