在進(jìn)行H5頁(yè)面開(kāi)發(fā)時(shí),項(xiàng)目都要提測(cè)了,產(chǎn)品卻加了個(gè)點(diǎn)擊展開(kāi)和點(diǎn)擊收起的需求。 上知乎看了下 ,也有人有這樣的疑問(wèn),今天我就把問(wèn)題給解決啦~
這里就來(lái)講述下我的解決方案:
利用多行溢出實(shí)現(xiàn)“展開(kāi)”“收起”
多行溢出省略Css:
overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
設(shè)計(jì)是這樣的。
點(diǎn)擊展開(kāi).png
點(diǎn)擊收起.png
接下來(lái)我來(lái)講講我的實(shí)現(xiàn)
<div class="review"> 孫燕姿導(dǎo)師評(píng)語(yǔ):這位同學(xué)唱功基礎(chǔ)扎實(shí),轉(zhuǎn)音和高低音的切換非常自然,整首歌曲感情飽滿,非常不錯(cuò)。整首歌曲感情飽滿,非常不錯(cuò)。整首歌曲感情飽滿,非常不錯(cuò)。 </div>
<style> .review{ padding-top: .2rem; padding-bottom: .1rem; margin-left: .9rem; font-size: .32rem; color:#b85423; line-height: 1.5em; position: relative; } .ellipsis{ overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .spread{ padding-right: .2rem; position: absolute; bottom: .09rem; right:0; } .spread i{ width: .2266rem; height:.2266rem; display: inline-block; vertical-align: middle; background-image: url(/cdn_img/plusSprite.png); background-repeat: no-repeat; background-size: .2266rem .72rem; } .spread i.plus{ background-position: 0 0; } .spread i.reduce{ background-position: 0 -0.4933rem; } </style>
$('.teacher-review').forEach(function(v,i){ // 引入flexible.js 進(jìn)行移動(dòng)端適配 // 根據(jù)flexible 獲取rem 即 window.rem if(v.clientHeight > (1.27*window.rem)){ var el = document.createElement('span'); el.innerHTML = '... <i class="plus"></i>點(diǎn)擊展開(kāi)'; el.className = 'spread'; // 由于每條評(píng)論相間背景 el.style.backgroundColor = i%2 == 0 ? '#ffca48' : '#ffd358'; v.appendChild(el); // multi 是顯示溢出的標(biāo)志 $(v).addClass('ellipsis multi') } }) // 點(diǎn)擊判斷收起還是展開(kāi) $('.review').on('click','.multi',function(e){ var $this = $(this) if($this.hasClass('ellipsis')){ $this.removeClass('ellipsis').find('span').html('<i class="reduce"></i>點(diǎn)擊收起'); }else{ $this.addClass('ellipsis').find('span').html('... <i class="plus"></i>點(diǎn)擊展開(kāi)'); } })
結(jié)果是這樣的。。
這里講解下展開(kāi)收起的思路:
出現(xiàn)展開(kāi)的情況是因?yàn)閮?nèi)容溢出,那內(nèi)容沒(méi)溢出就不需要顯示“點(diǎn)擊展開(kāi)的按鈕啦”,好心煩,突然接到需求,都沒(méi)心情熱飯吃。
熱飯過(guò)程中靈感一閃,有了!判斷下內(nèi)容的高度,只要大于指定的高度就能解決溢出顯示“點(diǎn)擊展開(kāi)”,不溢出就不顯示。
這里的multi class 是為了區(qū)分內(nèi)容溢出還是沒(méi)溢出~~~~
如果內(nèi)容顯示溢出就加個(gè)ellipsis class,一旦點(diǎn)擊,判斷存在ellipsis class 說(shuō)明內(nèi)容溢出啦 ,這時(shí)候移除ellipsis class 就展開(kāi)內(nèi)容了 是不是很簡(jiǎn)單。 剩下的就不說(shuō)了,大家應(yīng)該都明白了~~
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com