如何用 jQuery 实现“加载更多”并自动隐藏已展示内容（无 PHP 分页）-php教程-PHP中文网

如何用 jQuery 实现“加载更多”并自动隐藏已展示内容（无 PHP 分页）

本文介绍一种纯前端的“加载更多”交互方案：通过 jquery 动态显示新内容、同时隐藏旧内容，无需后端分页逻辑，适用于静态数据或预加载列表的场景。

本文介绍一种纯前端的“加载更多”交互方案：通过 jquery 动态显示新内容、同时隐藏旧内容，无需后端分页逻辑，适用于静态数据或预加载列表的场景。

在 Web 开发中，“加载更多（Load More）”是一种比传统分页更流畅的用户体验方式。与每次点击跳转页面或重新请求分页数据不同，本文方案完全基于前端控制——所有内容已在 HTML 中一次性加载（例如由 PHP 渲染完成），jQuery 仅负责按需显示/隐藏对应区块，实现“滑动式”内容切换。

核心思路是：

初始只显示前 N 条（如 2 条）；
每次点击“Load More”，隐藏当前已显示的内容，再展开下一批（同样为 2 条）；
当所有内容均已展示完毕时，自动隐藏按钮并提示“No More”。

以下是完整可运行的实现代码：



  <meta charset="UTF-8"><title>Load More without Pagination</title><style>
    .nextContent {
      display: none;
      margin: 5px 0;
      padding: 8px 0;
      background: #eee;
      border: 1px solid #ccc;
      text-align: center;
      transition: opacity 0.3s ease;
    }
    #loadMore {
      padding: 10px;
      width: 100%;
      display: block;
      text-align: center;
      background-color: #33739E;
      color: #fff;
      border: none;
      box-shadow: 0 1px 1px #ccc;
      transition: all 600ms ease-in-out;
      margin: 10px 0;
    }
    #loadMore:hover {
      background-color: #eee;
      color: #33739E;
      cursor: pointer;
    }
  </style><div class="nextContent">Content 1</div>
<div class="nextContent">Content 2</div>
<div class="nextContent">Content 3</div>
<div class="nextContent">Content 4</div>
<div class="nextContent">Content 5</div>
<div class="nextContent">Content 6</div>
<div class="nextContent">Content 7</div>
<div class="nextContent">Content 8</div>

<a href="#" id="loadMore">Load More</a>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>
$(function() {
  // 初始显示前2条
  $(".nextContent").slice(0, 2).show();
  let loadCount = 0;

  $("#loadMore").on('click', function(e) {
    e.preventDefault();
    loadCount++;

    // 隐藏当前已显示的所有项
    $(".nextContent:visible").hide();

    // 显示下一批（每批2条）
    const start = loadCount * 2;
    const end = start + 2;
    $(".nextContent").slice(start, end).slideDown(300);

    // 检查是否已全部加载
    if ($(".nextContent:hidden").length === 0) {
      $(this).fadeOut('slow', function() {
        $(this).replaceWith('<p class="p" style="text-align:center; color:#666;">No More Content');
      });
    }

    // 平滑滚动至按钮位置（提升体验）
    $('html, body').animate({
      scrollTop: $(this).offset().top - 100
    }, 400);
  });
});
</script>

✅ 关键要点说明：