javascript - jq 固定高度文字展開收起
問題描述
<p class='text'><p class='desc'>目木家居旗艦店，專注家居二十年。我們彰顯個性，具有濃郁現(xiàn)代感現(xiàn)代風(fēng)格家居設(shè)計的特色是，其設(shè)計的元素、材料都很單一，這種設(shè)計風(fēng)格已經(jīng)成為越來越多時尚潮人裝修的首選，現(xiàn)代風(fēng)格家居設(shè)計從整體到局部、從空間到室內(nèi)陳設(shè)塑造，精雕細(xì)琢，給人一絲不茍的印象</p><a href='javascript:void(0);' class='more'>更多</a> </p>
這樣的效果該如何實現(xiàn)，收起展開箭頭有變化試著寫了下效果 貌似不太理想，因為這里寫的高度是個固定的，但是這個文字的多少是不確定的demo
問題解答
回答1：直接在p外層包上一層，外層overflow隱藏，獲取p的高度設(shè)置即可；注意p的默認(rèn)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'>目木家居旗艦店，專注家居二十年。我們彰顯個性，具有濃郁現(xiàn)代感現(xiàn)代風(fēng)格家居設(shè)計的特色是，其設(shè)計的元素、材料都很單一，這種設(shè)計風(fēng)格已經(jīng)成為越來越多時尚潮人裝修的首選，現(xiàn)代風(fēng)格家居設(shè)計從整體到局部、從空間到室內(nèi)陳設(shè)塑造，精雕細(xì)琢，給人一絲不茍的印象目木家居旗艦店，專注家居二十年。我們彰顯個性，具有濃郁現(xiàn)代感現(xiàn)代風(fēng)格家居設(shè)計的特色是，其設(shè)計的元素、材料都很單一，這種設(shè)計風(fēng)格已經(jīng)成為越來越多時尚潮人裝修的首選，現(xiàn)代風(fēng)格家居設(shè)計從整體到局部、從空間到室內(nèi)陳設(shè)塑造，精雕細(xì)琢，給人一絲不茍的印象目木家居旗艦店，專注家居二十年。我們彰顯個性，具有濃郁現(xiàn)代感現(xiàn)代風(fēng)格家居設(shè)計的特色是，其設(shè)計的元素、材料都很單一，這種設(shè)計風(fēng)格已經(jīng)成為越來越多時尚潮人裝修的首選，現(xiàn)代風(fēng)格家居設(shè)計從整體到局部、從空間到室內(nèi)陳設(shè)塑造，精雕細(xì)琢，給人一絲不茍的印象目木家居旗艦店，專注家居二十年。我們彰顯個性，具有濃郁現(xiàn)代感現(xiàn)代風(fēng)格家居設(shè)計的特色是，其設(shè)計的元素、材料都很單一，這種設(shè)計風(fēng)格已經(jīng)成為越來越多時尚潮人裝修的首選，現(xiàn)代風(fēng)格家居設(shè)計從整體到局部、從空間到室內(nèi)陳設(shè)塑造，精雕細(xì)琢，給人一絲不茍的印象</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>
其實挺簡單的：如果你要根據(jù)文字?jǐn)?shù)量來展開或者收縮，那么你就根據(jù)文字的length來設(shè)定判斷條件,當(dāng)長度小于的時候format一份html，這個html上面沒有圖標(biāo)，當(dāng)長度大于規(guī)定長度時，收縮時，對所有文字字符串進(jìn)行截取然后拼接一個展開的圖標(biāo)，這個font-awesome上面有很多，就對應(yīng)然后展示到頁面上，然后展開也是一樣的套路，只不過不用截取字符串了，就把所有字符串拼接一個收縮的圖標(biāo)即可，然后分別在兩個圖標(biāo)上面綁定事件，我在下面給了我之前實現(xiàn)的具體例子，代碼不全，給你提供思路及實現(xiàn)應(yīng)該是足夠了
function format_html_collapse(info) { var expand_html = ’<a href='http://www.b3g6.com/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.b3g6.com/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
前幾天看了 @姑奶奶 的回答（這里）受到了一些啟發(fā)。重點在于：不定高度的情況下的展開，先將高度設(shè)置為auto，再使用getComputedStyle獲取到高度，然后設(shè)置高度為0，在使用獲取到的高度去做動畫。
相關(guān)文章：
1. mac里的docker如何命令行開啟呢？2. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””3. nignx - docker內(nèi)nginx 80端口被占用4. docker容器呢SSH為什么連不通呢？5. 為什么我ping不通我的docker容器呢？？？6. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題7. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問題。8. docker-compose 為何找不到配置文件？9. javascript - 最近用echarts做統(tǒng)計圖時遇到兩個問題！！10. docker gitlab 如何git clone？
網(wǎng)公網(wǎng)安備