如何實作出Read more 按鈕?

「該如何實作出Read more 按鈕呢?」今天在寫 [FE210] 從新手到中手:前端工程加強班 這門課的作業1時,最後一個自我練習是「這次實作的畫面當頻道名稱字太多的時候,會超出一格的大小或者會直接被卡掉,有沒有辦法讓字太多的時候在尾巴顯示...?例如原本名稱叫做:「1234567」,顯示的時候變成:「12345…」?」剛好最近開始經營部落格,於是就很好奇那我每天看到的Read more按鈕到底是怎麼實做的呢?我有沒有能力做出這個按鈕呢?

結果Google一下發現,還真不難!結果Google一下發現,還真不難!而且個人還覺得W3Schools寫得有點複雜了哈哈。

前置作業

因為要亂數產生中文字,所以先安裝了VS code的這個外掛:Chinese Lorem,安裝完後只要在VS code打ctlorem就會亂數產生中文字了。

以下是一段文字:

如何實作Read more的按鈕?

快車熟悉很多人傳播台南房地產十年消除,下一頁有很多,欣賞一座版面認證條件不過行情看看而在字元傳說答案,今後銀行,辦公室證券根據評分請問競爭表演起點,適應內存出發很快則是男女偉大身體檢測笑容人口,灌水版本來看想到房價高中歡迎,訓練不必傢俱一款快車,湖口可用。性別印度一時部分連續家庭因為渠道發佈積分,處理器娛樂內部就要報名內部面議趨勢台北基於體會並非其它,來電條款時間空氣合適傳奇塑膠毫不隱藏財產,不好意思性格超市主任房東不對高校對不起性質最快臺灣民眾,網咖博士閲讀本類連續故障你是小遊戲近年來套件勝利給予男生所。搜尋考慮訓練多多斗內數碼相機一絲照片職業大部分,競爭階段採用經濟專區所說心靈國際適用信譽光碟容易,留學管理員我的您可以學校同時房屋親愛的當前其他的,觀看之中部落格,眼神面前暴力網頁課程權力輔助超過,重量只是放心無法忽然地上當你存在一般二手本人水果,大會瀏。

而我們希望做出一個按鈕:Read more,這個按鈕的作用是點下後會將文章的所有文字顯示出來,也就是變成下圖這樣。

如何實作Read more的按鈕?

快車熟悉很多人傳播台南房地產十年消除,下一頁有很多,欣賞一座版面認證條件不過行情看看而在字元傳說答案,今後銀行,辦公室證券根據評分請問競爭表演起點,適應內存出發很快則是男女偉大身體檢測笑容人口,灌水版本來看想到房價高中歡迎,訓練不必傢俱一款快車,湖口可用。 性別印度一時部分連續家庭因為渠道發佈積分,處理器娛樂內部就要報名內部面議趨勢台北基於體會並非其它,來電條款時間空氣合適傳奇塑膠毫不隱藏財產,不好意思性格超市主任房東不對高校對不起性質最快臺灣民眾,網咖博士閲讀本類連續故障你是小遊戲近年來套件勝利給予男生所。搜尋考慮訓練多多斗內數碼相機一絲照片職業大部分,競爭階段採用經濟專區所說心靈國際適用信譽光碟容易,留學管理員我的您可以學校同時房屋親愛的當前其他的,觀看之中部落格,眼神面前暴力網頁課程權力輔助超過,重量只是放心無法忽然地上當你存在一般二手本人水果,大會瀏。

程式碼說明

HTML

  1. 把想隱藏的段落用span包起來,再給一個class:display: none
  2. 加個…字串,放在Read more按鈕之前
  3. 新增一個Read more按鈕
<section>
    <div class="text_container">
        <h1>如何實作Read more的按鈕?</h1>
        <p>
            快車熟悉很多人傳播台南房地產十年消除,下一頁有很多,欣賞一座版面認證條
            件不過行情看看而在字元傳說答案,今後銀行,辦公室證券根據評分請問競爭表
            演起點,適應內存出發很快則是男女偉大身體檢測笑容人口,灌水版本來看想到
            房價高中歡迎,訓練不必傢俱一款快車,湖口可用。
            <span class="dots">...</span>
            <span class="moreText show" id="more">
            性別印度一時部分連續家庭因為渠道發佈積分,處理器娛樂內部就要報名內部面
            議趨勢台北基於體會並非其它,來電條款時間空氣合適傳奇塑膠毫不隱藏財產,
            不好意思性格超市主任房東不對高校對不起性質最快臺灣民眾,網咖博士閲讀本
            類連續故障你是小遊戲近年來套件勝利給予男生所。搜尋考慮訓練多多斗內數碼
            相機一絲照片職業大部分,競爭階段採用經濟專區所說心靈國際適用信譽光碟容
            易,留學管理員我的您可以學校同時房屋親愛的當前其他的,觀看之中部落格,
            眼神面前暴力網頁課程權力輔助超過,重量只是放心無法忽然地上當你存在一般
            二手本人水果,大會瀏。
            </span>
            <button class="moreButton">Read more</button>
        </p>
    </div>
</section>

CSS

    section{
        display: flex;
        height: 100vh;
        justify-content: center;
        align-items: center;
        margin: 0;
    }
    .text_container{
        width: 50vw;
        box-shadow: 5px 10px 18px #888888;
        padding: 10px 20px;
    }
    .show{
        display: none;
    }
    .moreButton{
        cursor: pointer;
    }
    .moreButton:hover{
        color: blue;
    }

再來就是JavaScript的部分:

  1. 為Read more按鈕新增監聽事件
  2. 當按下按鈕時,我希望
  • 按鈕消失
  • 原本隱藏的段落出現
  • …字串消失

這三個需求的共通點是:只靠顯示或消失一個class:display: none就可以達成,所以我直接用querySelector選到這三個class後,再用toggle後就大功告成啦!

JavaScript

    const moreButton = document.querySelector('.moreButton')
    moreButton.addEventListener('click', function(){
        document.querySelector('.moreText').classList.toggle('show')
        document.querySelector('.moreButton').classList.toggle('show')
        document.querySelector('.dots').classList.toggle('show')
    })

以下就是完成後的樣子!

如何實作Read more的按鈕?

快車熟悉很多人傳播台南房地產十年消除,下一頁有很多,欣賞一座版面認證條 件不過行情看看而在字元傳說答案,今後銀行,辦公室證券根據評分請問競爭表 演起點,適應內存出發很快則是男女偉大身體檢測笑容人口,灌水版本來看想到 房價高中歡迎,訓練不必傢俱一款快車,湖口可用。 性別印度一時部分連續家庭因為渠道發佈積分,處理器娛樂內部就要報名內部面 議趨勢台北基於體會並非其它,來電條款時間空氣合適傳奇塑膠毫不隱藏財產, 不好意思性格超市主任房東不對高校對不起性質最快臺灣民眾,網咖博士閲讀本 類連續故障你是小遊戲近年來套件勝利給予男生所。搜尋考慮訓練多多斗內數碼 相機一絲照片職業大部分,競爭階段採用經濟專區所說心靈國際適用信譽光碟容 易,留學管理員我的您可以學校同時房屋親愛的當前其他的,觀看之中部落格, 眼神面前暴力網頁課程權力輔助超過,重量只是放心無法忽然地上當你存在一般 二手本人水果,大會瀏。

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top