jquery文字隱藏點擊更多顯示

隨著網路科技的發展，網站的使用者體驗越來越受到重視。在網站設計中，如何更好地展示內容，提高使用者的閱讀體驗成為了一個重要的議題。

針對較長的頁面內容，為了避免頁面過長，我們通常會使用文字折疊或點擊更多的方式，讓使用者可以自主選擇是否展開全文。在Web開發中，jQuery是一個廣泛使用的工具庫之一，下面我們將透過一個實例來示範如何使用jQuery實現點擊更多顯示的效果。

首先，我們需要引入jQuery庫，可以透過CDN方式引入，也可以將jQuery庫下載到本地並引入。以CDN方式為例，程式碼如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

接著，我們需要在HTML中進行相關的佈局，例如：

<div class="card">
  <h2>这是一个标题</h2>
  <p>这是一段文字，可能比较长，需要进行折叠。</p>
  <a class="show-more">更多</a>
  <a class="show-less">收起</a>
</div>

在這個例子中，我們使用一個帶有標題和內容的卡片佈局，並添加了兩個鏈接，分別是“更多”和“收起”。

接下來，我們可以使用jQuery來實現點擊更多顯示的效果。具體程式碼如下：

$(function() {
  // 隐藏“收起”链接
  $(".show-less").hide();
  // 获取要显示的元素
  var content = $(".card p");
  // 要显示的字符数
  var chars = 100;
  // 如果内容长度小于字符数，不进行折叠处理
  if (content.text().length > chars) {
    // 隐藏超出字符数的内容
    var short = content.text().substr(0, chars);
    var long = content.text().substr(chars);
    content.html(short + '<span class="d-inline-block ellipsis">...</span><span class="long d-none">' + long + '</span>');
    // 点击更多
    $(".show-more").click(function() {
      $(this).hide();
      $(".show-less").show();
      $(".card p .long").removeClass("d-none");
      $(".card p .ellipsis").addClass("d-none");
    });
    // 点击收起
    $(".show-less").click(function() {
      $(this).hide();
      $(".show-more").show();
      $(".card p .long").addClass("d-none");
      $(".card p .ellipsis").removeClass("d-none");
    });
  }
});

上述程式碼的邏輯大致如下：

1. 首先，我們先將「收起」連結隱藏，因為初始狀態下，要顯示的元素已經是折疊狀態；
2. 然後，我們取得要折疊的內容元素，以及要顯示的字元數；
3. 如果要顯示的內容長度小於字元數，則不進行折疊處理；
4. 否則，我們需要將超出字元數的內容進行隱藏，並在結尾處加上「...」符號；
5. 當使用者點擊「更多」連結時，我們需要將超出字元數的內容進行展開，並隱藏「...」符號和「更多」連結；
6. 當使用者點擊「收起」連結時，我們需要將超出字元數的內容進行折疊，並顯示“...”符號和“更多”連結。

上述邏輯其實十分簡單，但要注意的點也很多。下面我們將其中的一些關鍵點進行解釋。

首先，我們在HTML中加入了一個帶有「.long」類別的元素，用於隱藏超出字元數的內容。在CSS中可以這麼定義：

.long {
  white-space: pre-wrap;
}

這裡我們將它的white-space屬性設為“pre-wrap”，主要是為了防止單字被截斷的情況。在瀏覽器中，預設情況下white-space的屬性值為“normal”，即不會自動換行，只會在遇到空格或製表符時進行斷行。

其次，我們在HTML中加入了一個帶有「.ellipsis」類別的元素，用於新增省略號「...」。在CSS中可以這麼定義：

.ellipsis:before {

  font-weight: bold;
}

最後，我們需要注意到，在jQuery事件綁定時，使用的是click事件。隨著HTML5的發展，click事件在行動端不是很友好，因為行動端的touch事件與click事件相似，但不完全相同。為了相容於各種裝置和瀏覽器，建議使用jQuery的on方法來綁定事件，可以根據實際需求選擇綁定的事件。

綜上所述，基於jQuery的點擊更多顯示功能可以為我們的網站提供良好的使用者體驗，讓使用者更自由地選擇是否展開所有內容。

以上是jquery文字隱藏點擊更多顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！