原生JS仿QQ閱讀點(diǎn)擊展開(kāi)、收起效果
使用JS技術(shù)實(shí)現(xiàn)QQ閱讀類似的點(diǎn)擊展開(kāi)、收起效果,具體內(nèi)容如下
一、定義展開(kāi)函數(shù)showdiv(),實(shí)現(xiàn)點(diǎn)擊"全文"按鈕,全文展開(kāi)。
1.點(diǎn)擊展開(kāi)函數(shù),需要將觸發(fā)點(diǎn)擊事件的按鈕作為參數(shù)傳入
2.通過(guò)傳入的按鈕,查找其父元素,將其父元素設(shè)置為隱藏。
3.將緊跟其父元素之后的元素設(shè)置為顯示。
二、定義收起函數(shù)hidediv(),實(shí)現(xiàn)點(diǎn)擊"收起全文"按鈕,全文內(nèi)容隱藏。
1.點(diǎn)擊收起函數(shù),需要將觸發(fā)點(diǎn)擊事件的按鈕作為參數(shù)傳入
2.通過(guò)傳入的按鈕,查找其父元素,將其父元素設(shè)置為隱藏。
3.將緊跟其父元素之前的元素設(shè)置為顯示。
注意:為了瀏覽器兼容,一定要判斷找到的節(jié)點(diǎn)nodeType是否為元素節(jié)點(diǎn)。
效果如圖:
具體代碼:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> body { margin: 0 auto; padding: 0; font-size: 9pt; line-height: 180%; } #pn { background: #f8f8f8; height: auto; width: 750px; margin: 0 auto; padding: 5px; } .artTitle { font-weight: bold; color: #3030FF; font-size: 11pt; } .subTitle { color: #CCC; } .content { border: 1px solid #CCC; display: none; padding: 5px; } .btm { text-align: right; height: 30px; } .btn { width: 80px; height: 20px; padding: 5px 3px 5px 3px; text-align: center; text-decoration: none; background: #f0f0f0; border: 1px solid #CCC; } </style> <script type="text/javascript"> // 顯示函數(shù) function showdiv(obj) { var x=obj.parentNode; var y=x.nextSibling; while(y.nodeType!=1){ y=y.nextSibling; } x.style.display="none"; y.style.display="block"; } // 隱藏函數(shù) function hidediv(obj) { var x=obj.parentNode.parentNode; var y=x.previousSibling; while(y.nodeType!=1){ y=y.previousSibling; } x.style.display="none"; y.style.display="block"; } </script> </head> <body> <div id="pn"> <div id="art0"> <p class="artTitle"> Slack:團(tuán)隊(duì)日常溝通協(xié)作工具典范 </p> <p class="subTitle"> 作者:來(lái)自網(wǎng)絡(luò) 發(fā)表時(shí)間:2014-3-1 </p> <p> 現(xiàn)在可以在Slack.com上申請(qǐng)成為試用用戶,這是一個(gè)面對(duì)企業(yè)、團(tuán)隊(duì)的協(xié)作工具,似乎需要試用企業(yè)域名后綴的郵箱。 Slack從目前看,基本符合我對(duì)團(tuán)隊(duì)溝通工具的完全要求。特點(diǎn)如下: 在所有端都可以進(jìn)行,即桌面端,包括Mac OS和Windows系統(tǒng);web端即瀏覽器;移動(dòng)端的支持包括iOS和Android。 同時(shí),移動(dòng)端是有良好體驗(yàn)以滿足移動(dòng)辦公便利性的。 聚焦核心行為,即"發(fā)布一條信息",團(tuán)隊(duì)成員只需要做一個(gè)這個(gè)基本行為即可。 發(fā)布一條... <a href="#" onclick="javascript:showdiv(this);" >展開(kāi)全文</a></p> <div class="content"> <p>現(xiàn)在可以在Slack.com上申請(qǐng)成為試用用戶,這是一個(gè)面對(duì)企業(yè)、團(tuán)隊(duì)的協(xié)作工具,似乎需要試用企業(yè)域名后綴的郵箱。 Slack從目前看,基本符合我對(duì)團(tuán)隊(duì)溝通工具的完全要求。特點(diǎn)如下:</p> <p>聚焦核心行為,即“發(fā)布一條信息”,團(tuán)隊(duì)成員只需要做一個(gè)這個(gè)基本行為即可。</p> <p>發(fā)布一條信息這個(gè)行為可以擴(kuò)展成為該信息是一個(gè)圖片或者一個(gè)文件等,以便協(xié)作更好進(jìn)行,如果文件能快速預(yù)覽則更好。</p> <p>支持@方式直接和單個(gè)團(tuán)隊(duì)成員溝通,并且能夠被其他成員看到和參與進(jìn)來(lái)。</p> <p>以#來(lái)進(jìn)行快速形成話題組或者項(xiàng)目組。</p> <p>良好的搜索支持。 上述雖然是Slack的特性,也是我對(duì)團(tuán)隊(duì)日常協(xié)作工具的要求——顯然,Slack完全符合這些要求,而且產(chǎn)品做得很易用。這些要求其實(shí)就是我對(duì)“移動(dòng)、社交、云端存儲(chǔ)”的理解,這三個(gè)因素基本會(huì)重寫很多軟件和應(yīng)用。</p> <p>Slack有免費(fèi)的lite版本,但收費(fèi)版本似乎價(jià)格對(duì)中文用戶而言略高。</p> <p>Slack由我很喜歡的項(xiàng)目Flickr的創(chuàng)始人新公司TinySpeck創(chuàng)辦,因此基礎(chǔ)甚好。而且從目前看,基本上會(huì)成為一個(gè)很成功的應(yīng)用,所以在產(chǎn)品持續(xù)發(fā)展上面應(yīng)該毫無(wú)問(wèn)題。</p> <p>The post Slack:團(tuán)隊(duì)日常溝通協(xié)作工具典范 appeared first on 游山打獵.</p> <div class="btm"> <a href="#" class="btn" onclick="javascript:hidediv(this);">收起全文</a> </div> </div> </div> <hr /> <div id="art1"> <p class="artTitle"> Slack:團(tuán)隊(duì)日常溝通協(xié)作工具典范 </p> <p class="subTitle"> 作者:來(lái)自網(wǎng)絡(luò) 發(fā)表時(shí)間:2014-3-1 </p> <p>現(xiàn)在可以在Slack.com上申請(qǐng)成為試用用戶,這是一個(gè)面對(duì)企業(yè)、團(tuán)隊(duì)的協(xié)作工具,似乎需要試用企業(yè)域名后綴的郵箱。 Slack從目前看,基本符合我對(duì)團(tuán)隊(duì)溝通工具的完全要求。特點(diǎn)如下: 在所有端都可以進(jìn)行,即桌面端,包括Mac OS和Windows系統(tǒng);web端即瀏覽器;移動(dòng)端的支持包括iOS和Android。 同時(shí),移動(dòng)端是有良好體驗(yàn)以滿足移動(dòng)辦公便利性的。 聚焦核心行為,即"發(fā)布一條信息",團(tuán)隊(duì)成員只需要做一個(gè)這個(gè)基本行為即可。 發(fā)布一條... <a href="#" onclick="javascript:showdiv(this);">展開(kāi)全文</a></p> <div class="content"> <p>現(xiàn)在可以在Slack.com上申請(qǐng)成為試用用戶,這是一個(gè)面對(duì)企業(yè)、團(tuán)隊(duì)的協(xié)作工具,似乎需要試用企業(yè)域名后綴的郵箱。 Slack從目前看,基本符合我對(duì)團(tuán)隊(duì)溝通工具的完全要求。特點(diǎn)如下:</p> <p>在所有端都可以進(jìn)行,即桌面端,包括Mac OS和Windows系統(tǒng);web端即瀏覽器;移動(dòng)端的支持包括iOS和Android。</p> <p>同時(shí),移動(dòng)端是有良好體驗(yàn)以滿足移動(dòng)辦公便利性的。</p> <p>聚焦核心行為,即“發(fā)布一條信息”,團(tuán)隊(duì)成員只需要做一個(gè)這個(gè)基本行為即可。</p> <p>發(fā)布一條信息這個(gè)行為可以擴(kuò)展成為該信息是一個(gè)圖片或者一個(gè)文件等,以便協(xié)作更好進(jìn)行,如果文件能快速預(yù)覽則更好。</p> <p>支持@方式直接和單個(gè)團(tuán)隊(duì)成員溝通,并且能夠被其他成員看到和參與進(jìn)來(lái)。</p> <p>The post Slack:團(tuán)隊(duì)日常溝通協(xié)作工具典范 appeared first on 游山打獵.</p> <div class="btm"> <a href="#" class="btn" onclick='hidediv(this)'>收起全文</a> </div> </div> </div> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript實(shí)現(xiàn)文字展開(kāi)和收起效果
- vue.js 實(shí)現(xiàn)點(diǎn)擊展開(kāi)收起動(dòng)畫效果
- JavaScript實(shí)現(xiàn)兼容IE6的收起折疊與展開(kāi)效果實(shí)例
- 原生js實(shí)現(xiàn)新聞列表展開(kāi)/收起全文功能
- JavaScript控制網(wǎng)頁(yè)層收起和展開(kāi)效果的方法
- 一個(gè)封裝js代碼-----展開(kāi)收起效果示例
- 自己寫了一個(gè)展開(kāi)和收起的多更能型的js效果
- 慢慢展開(kāi)再慢慢收起的javascript廣告效果
- css+js制作不定高度展開(kāi)收起動(dòng)畫詳解
相關(guān)文章
前端如何監(jiān)聽(tīng)手機(jī)鍵盤是否彈起示例詳解
實(shí)際應(yīng)用中我們會(huì)遇到監(jiān)聽(tīng)按鍵輸入和鼠標(biāo)點(diǎn)擊事件,這篇文章主要介紹了前端如何監(jiān)聽(tīng)手機(jī)鍵盤是否彈起的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02Bootstrap.css與layDate日期選擇樣式起沖突的解決辦法
這篇文章主要為大家詳細(xì)介紹了BootStrap.css與layDate日期選擇樣式起沖突的解決辦法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-0420個(gè)常見(jiàn)的JavaScript數(shù)組操作總結(jié)
JavaScript中的Array對(duì)象與其他編程語(yǔ)言中的數(shù)組一樣,是一組數(shù)據(jù)的集合。在JavaScript中,數(shù)組里面的數(shù)據(jù)可以是不同類型的,并具有用于執(zhí)行數(shù)組常見(jiàn)操作的方法,本文整理了一些常用的,需要的可以參考一下2022-09-09終于解決了IE8不支持?jǐn)?shù)組的indexOf方法
今天,測(cè)試報(bào)過(guò)來(lái)一個(gè)js bug, 在IE8下有個(gè)js錯(cuò)誤,但是在其它瀏覽器下(Firefox, Chrome, IE9)下面都很正常。后來(lái)調(diào)試發(fā)現(xiàn)原因是在IE8下,js數(shù)組沒(méi)有indexOf方法。2013-04-04