javascript - jq 固定高度文字展開收起
問題描述
<p class='text'><p class='desc'>目木家居旗艦店，專注家居二十年。我們彰顯個(gè)性，具有濃郁現(xiàn)代感現(xiàn)代風(fēng)格家居設(shè)計(jì)的特色是，其設(shè)計(jì)的元素、材料都很單一，這種設(shè)計(jì)風(fēng)格已經(jīng)成為越來越多時(shí)尚潮人裝修的首選，現(xiàn)代風(fēng)格家居設(shè)計(jì)從整體到局部、從空間到室內(nèi)陳設(shè)塑造，精雕細(xì)琢，給人一絲不茍的印象</p><a href='javascript:void(0);' class='more'>更多</a> </p>
這樣的效果該如何實(shí)現(xiàn)，收起展開箭頭有變化試著寫了下效果 貌似不太理想，因?yàn)檫@里寫的高度是個(gè)固定的，但是這個(gè)文字的多少是不確定的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'>目木家居旗艦店，專注家居二十年。我們彰顯個(gè)性，具有濃郁現(xiàn)代感現(xiàn)代風(fēng)格家居設(shè)計(jì)的特色是，其設(shè)計(jì)的元素、材料都很單一，這種設(shè)計(jì)風(fēng)格已經(jīng)成為越來越多時(shí)尚潮人裝修的首選，現(xiàn)代風(fēng)格家居設(shè)計(jì)從整體到局部、從空間到室內(nèi)陳設(shè)塑造，精雕細(xì)琢，給人一絲不茍的印象目木家居旗艦店，專注家居二十年。我們彰顯個(gè)性，具有濃郁現(xiàn)代感現(xiàn)代風(fēng)格家居設(shè)計(jì)的特色是，其設(shè)計(jì)的元素、材料都很單一，這種設(shè)計(jì)風(fēng)格已經(jīng)成為越來越多時(shí)尚潮人裝修的首選，現(xiàn)代風(fēng)格家居設(shè)計(jì)從整體到局部、從空間到室內(nèi)陳設(shè)塑造，精雕細(xì)琢，給人一絲不茍的印象目木家居旗艦店，專注家居二十年。我們彰顯個(gè)性，具有濃郁現(xiàn)代感現(xiàn)代風(fēng)格家居設(shè)計(jì)的特色是，其設(shè)計(jì)的元素、材料都很單一，這種設(shè)計(jì)風(fēng)格已經(jīng)成為越來越多時(shí)尚潮人裝修的首選，現(xiàn)代風(fēng)格家居設(shè)計(jì)從整體到局部、從空間到室內(nèi)陳設(shè)塑造，精雕細(xì)琢，給人一絲不茍的印象目木家居旗艦店，專注家居二十年。我們彰顯個(gè)性，具有濃郁現(xiàn)代感現(xiàn)代風(fēng)格家居設(shè)計(jì)的特色是，其設(shè)計(jì)的元素、材料都很單一，這種設(shè)計(jì)風(fēng)格已經(jīng)成為越來越多時(shí)尚潮人裝修的首選，現(xiàn)代風(fēng)格家居設(shè)計(jì)從整體到局部、從空間到室內(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>
其實(shí)挺簡(jiǎn)單的：如果你要根據(jù)文字?jǐn)?shù)量來展開或者收縮，那么你就根據(jù)文字的length來設(shè)定判斷條件,當(dāng)長(zhǎng)度小于的時(shí)候format一份html，這個(gè)html上面沒有圖標(biāo)，當(dāng)長(zhǎng)度大于規(guī)定長(zhǎng)度時(shí)，收縮時(shí)，對(duì)所有文字字符串進(jìn)行截取然后拼接一個(gè)展開的圖標(biāo)，這個(gè)font-awesome上面有很多，就對(duì)應(yīng)然后展示到頁面上，然后展開也是一樣的套路，只不過不用截取字符串了，就把所有字符串拼接一個(gè)收縮的圖標(biāo)即可，然后分別在兩個(gè)圖標(biāo)上面綁定事件，我在下面給了我之前實(shí)現(xiàn)的具體例子，代碼不全，給你提供思路及實(shí)現(xiàn)應(yīng)該是足夠了
function format_html_collapse(info) { var expand_html = ’<a href='http://www.gepszalag.com/wenda/5605.html#' class='click_expand'>...點(diǎn)擊展開 ></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.gepszalag.com/wenda/5605.html#' class='click_collapse'>...點(diǎn)擊收起 ></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：
動(dòng)畫的話，試試這個(gè)：demo
前幾天看了 @姑奶奶 的回答（這里）受到了一些啟發(fā)。重點(diǎn)在于：不定高度的情況下的展開，先將高度設(shè)置為auto，再使用getComputedStyle獲取到高度，然后設(shè)置高度為0，在使用獲取到的高度去做動(dòng)畫。
相關(guān)文章：
1. 如何解決docker宿主機(jī)無法訪問容器中的服務(wù)？2. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣？這個(gè)是怎么回事？？？？3. require后不用使用echo返回到微信服務(wù)器 嗎4. nginx - 如何將wordpress系統(tǒng)放在二級(jí)域名下5. javascript - 請(qǐng)問要如何修改 Node 的透明度嗎？6. javascript - 求助，nodeJS和koa2文檔對(duì)新手小白太不友好，一臉懵逼。。。7. css3 background顯示圖片的一部分8. vim中編輯HTML文件時(shí)換行不能縮進(jìn)9. 在應(yīng)用配置文件 app.php 中找不到’route_check_cache’配置項(xiàng)10. html按鍵開關(guān)如何提交我想需要的值到數(shù)據(jù)庫
網(wǎng)公網(wǎng)安備