快捷導(dǎo)航

前端實(shí)現(xiàn)文本超出指定行數(shù)顯示"展開"和"收起"效果詳細(xì)步驟

更新時(shí)間：2024年10月12日 10:29:14 作者：Nyingchi-X

本文介紹如何使用JavaScript原生代碼實(shí)現(xiàn)文本折疊展開效果,并提供方法指導(dǎo)如何在Vue或React等框架中修改實(shí)現(xiàn),詳細(xì)介紹了創(chuàng)建整體框架、設(shè)置樣式及利用JS控制元素的步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

效果演示

本文方法是利用js原生進(jìn)行實(shí)現(xiàn)的，可根據(jù)相關(guān)vue或react語(yǔ)法進(jìn)行相關(guān)的改寫，并實(shí)現(xiàn)效果

步驟一：實(shí)現(xiàn)整體框架

 <div class='export-info-bar'>
    <span class='ellipsis-text export-info-text'>
      測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試
    </span>
    <span class='expand-button export-btn-group'>
      展開
    </span>
  </div>
  <div class='export-info-bar'>
    <span class='ellipsis-text export-info-text'>
      測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試
    </span>
    <span class='expand-button export-btn-group'>
      展開
    </span>
  </div>
  <div class='export-info-bar'>
    <span class='ellipsis-text export-info-text'>
      測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</span>
    <span class='expand-button export-btn-group'>
      展開
    </span>
  </div>

步驟二：實(shí)現(xiàn)樣式

1、底部容器設(shè)置定位，按鈕和文本容器利用z-index設(shè)計(jì)容器層級(jí)，并使按鈕定位在右下角；

2、設(shè)置 高度=指定隱藏行數(shù)*一行文本的高度，此處一行高度為21px，指定兩行隱藏，最大高度就為42px；

3、設(shè)置按鈕背景為白色，覆蓋在文本上方；

    /* 底部容器 */
    .export-info-bar {
      position: relative;
      /* overflow: hidden; */
      margin-top: 10px;
    }

    /* 文本 */
    .ellipsis-text {
      position: relative;
      /* float: left; */
      /* （***）設(shè)置最大高度為兩行的高度 */
      max-height: 42px; 
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-all;
      word-wrap: break-word;
      /* 設(shè)置文本在按鈕下方 */
      z-index: 0; 
    }

    /* 按鈕前方省略號(hào)的樣式 */
    .pseudo-element {
      color: #000;
      margin-right: 5px;
    }

    /* 按鈕 */
    .expand-button {
      /* (***) 設(shè)置定位，使按鈕與最后一行平行并覆蓋在最后一行上方 */
      position: absolute;
      /* 設(shè)置按鈕浮動(dòng)在右方 */
      /* float: right; */
      /* 默認(rèn)隱藏按鈕 */
      display: none;
      /* 將按鈕向上移動(dòng)一行 */
      right: 0px;
      bottom: -3px;
      color: skyblue;
      /* 此處背景一定要設(shè)置， */
      background: #fff;
    }

步驟三：js實(shí)現(xiàn)元素控制

    // 元素前方插入文本(因?yàn)閖s沒(méi)有無(wú)法設(shè)置：：before所以，實(shí)現(xiàn)了一個(gè)元素前方插入文本的方法)
    const addContentBefore = (element, content) => {
      // 創(chuàng)建一個(gè)新的偽元素
      const pseudoElement = document.createElement('span');
      pseudoElement.classList.add('pseudo-element');
      pseudoElement.textContent = content;

      // 將偽元素插入到目標(biāo)元素的前面
      if (element.firstChild) {
        element.insertBefore(pseudoElement, element.firstChild);
      } else {
        element.appendChild(pseudoElement);
      }
    };
	
	
    const getMoreText = () => {
        // 獲取文本容器
        const textContents = document.querySelectorAll('.export-info-text');
        // 獲取按鈕容器
        const expandButtons = document.querySelectorAll('.expand-button');

        // 檢查文本是否有超出兩行的文本，并顯示展開按鈕
        textContents.forEach((content, index) => {
          // 輸出查看當(dāng)前高度是否超過(guò)兩行高度（根據(jù)當(dāng)前字體大小進(jìn)行適配）
          console.log(content.scrollHeight, content.clientHeight)
          if (content.scrollHeight > content.clientHeight) {
            expandButtons[index].style.display = 'block'; // 顯示展開按鈕
            addContentBefore(expandButtons[index], '...'); // 按鈕前方模擬省略號(hào)
          }
        });

        // 為所有按鈕綁定點(diǎn)擊事件
        expandButtons.forEach((button, index) => {
          button.addEventListener('click', () => {
            // 切換文本的max-height屬性，實(shí)現(xiàn)展開效果
            const content = textContents[index];
            if (content.style.maxHeight !== 'none') {
               // 如果未展開，展開所有文本
              content.style.maxHeight = 'none';
              button.textContent = '收起'; // 改變按鈕文本
              addContentBefore(button, '');
            } else {
              // 如果已經(jīng)展開，恢復(fù)到兩行
              content.style.maxHeight = '42px'; // 恢復(fù)到兩行的高度
              button.textContent = '展開'; // 恢復(fù)按鈕文本
              addContentBefore(button, '...');
            }
          });
        });
      };

    getMoreText();

完整代碼

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 文本超出兩行顯示省略號(hào)，并設(shè)置“展開”，“收起”效果-->
  <style>
    /* 底部容器 */
    .export-info-bar {
      position: relative;
      /* overflow: hidden; */
      margin-top: 10px;
    }

    /* 文本 */
    .ellipsis-text {
      position: relative;
      /* float: left; */
      /* （***）設(shè)置最大高度為兩行的高度 */
      max-height: 42px; 
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-all;
      word-wrap: break-word;
      /* 設(shè)置文本在按鈕下方 */
      z-index: 0; 
    }

    /* 按鈕前方省略號(hào)的樣式 */
    .pseudo-element {
      color: #000;
      margin-right: 5px;
    }

    /* 按鈕 */
    .expand-button {
      /* (***) 設(shè)置定位，使按鈕與最后一行平行并覆蓋在最后一行上方 */
      position: absolute;
      /* 設(shè)置按鈕浮動(dòng)在右方 */
      /* float: right; */
      /* 默認(rèn)隱藏按鈕 */
      display: none;
      /* 將按鈕向上移動(dòng)一行 */
      right: 0px;
      bottom: -3px;
      color: skyblue;
      /* 此處背景一定要設(shè)置， */
      background: #fff;
    }
  </style>
</head>

<body>
  <div class='export-info-bar'>
    <span class='ellipsis-text export-info-text'>
      測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試
    </span>
    <span class='expand-button export-btn-group'>
      展開
    </span>
  </div>
  <div class='export-info-bar'>
    <span class='ellipsis-text export-info-text'>
      測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試
    </span>
    <span class='expand-button export-btn-group'>
      展開
    </span>
  </div>
  <div class='export-info-bar'>
    <span class='ellipsis-text export-info-text'>
      測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試測(cè)試</span>
    <span class='expand-button export-btn-group'>
      展開
    </span>
  </div>
  <script type="text/javascript">
    // 元素前方插入文本
    const addContentBefore = (element, content) => {
      // 創(chuàng)建一個(gè)新的偽元素
      const pseudoElement = document.createElement('span');
      pseudoElement.classList.add('pseudo-element');
      pseudoElement.textContent = content;

      // 將偽元素插入到目標(biāo)元素的前面
      if (element.firstChild) {
        element.insertBefore(pseudoElement, element.firstChild);
      } else {
        element.appendChild(pseudoElement);
      }
    };

    const getMoreText = () => {
        // 獲取文本容器
        const textContents = document.querySelectorAll('.export-info-text');
        // 獲取按鈕容器
        const expandButtons = document.querySelectorAll('.expand-button');

        // 檢查文本是否有超出兩行的文本，并顯示展開按鈕
        textContents.forEach((content, index) => {
          // 輸出查看當(dāng)前高度是否超過(guò)兩行高度（根據(jù)當(dāng)前字體大小進(jìn)行適配）
          console.log(content.scrollHeight, content.clientHeight)
          if (content.scrollHeight > content.clientHeight) {
            expandButtons[index].style.display = 'block'; // 顯示展開按鈕
            addContentBefore(expandButtons[index], '...'); // 按鈕前方模擬省略號(hào)
          }
        });

        // 為所有按鈕綁定點(diǎn)擊事件
        expandButtons.forEach((button, index) => {
          button.addEventListener('click', () => {
            // 切換文本的max-height屬性，實(shí)現(xiàn)展開效果
            const content = textContents[index];
            if (content.style.maxHeight !== 'none') {
               // 如果未展開，展開所有文本
              content.style.maxHeight = 'none';
              button.textContent = '收起'; // 改變按鈕文本
              addContentBefore(button, '');
            } else {
              // 如果已經(jīng)展開，恢復(fù)到兩行
              content.style.maxHeight = '42px'; // 恢復(fù)到兩行的高度
              button.textContent = '展開'; // 恢復(fù)按鈕文本
              addContentBefore(button, '...');
            }
          });
        });
      };

    getMoreText();
  </script>
</body>

</html>

總結(jié)

到此這篇關(guān)于前端實(shí)現(xiàn)文本超出指定行數(shù)顯示”展開”和”收起”效果的文章就介紹到這了,更多相關(guān)前端文本超出指定行數(shù)展開收起內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: