如何用 jQuery 实现“加载更多 + 隐藏旧内容”的无分页滚动展示效果-php教程-PHP中文网

如何用 jQuery 实现“加载更多 + 隐藏旧内容”的无分页滚动展示效果

本文介绍一种不依赖 php 后端分页、纯前端实现的“加载更多并自动隐藏已展示内容”的交互方案，通过 jquery 动态控制 dom 显示/隐藏，适用于静态内容分批呈现场景。

本文介绍一种不依赖 php 后端分页、纯前端实现的“加载更多并自动隐藏已展示内容”的交互方案，通过 jquery 动态控制 dom 显示/隐藏，适用于静态内容分批呈现场景。

在构建内容型页面（如博客摘要列表、产品卡片墙或 FAQ 折叠面板）时，常需避免传统分页带来的页面跳转与重复加载。虽然 AJAX 加载新数据是主流方案，但若内容已全部渲染在 HTML 中（例如由 PHP 一次性输出），我们仍可通过 jQuery 实现优雅的“渐进式展示”——即每次点击“加载更多”时，隐藏此前已显示的内容，仅保留最新一批可见项，营造出“内容流式更新”的视觉效果。

以下是一个轻量、可复用的实现方案：

AGI-Eval

AGI-Eval是一款AI模型评测工具，AI 大模型评测社区。

下载

✅ 核心逻辑说明

所有内容项统一使用 .nextContent 类标记，并默认 display: none；
初始仅显示前 N 条（示例中为前 2 条）；
每次点击 #loadMore，按批次（如每批 2 条）隐藏已显示项，再展开下一批隐藏项；
当所有内容均已展示完毕时，自动隐藏按钮并提示“No More”。

? 完整可运行代码示例



  <meta charset="UTF-8"><title>Load More + Hide Previous</title><style>
    .nextContent {
      display: none;
      margin: 5px 0;
      padding: 8px 0;
      background: #f9f9f9;
      border: 1px solid #ddd;
      text-align: center;
      border-radius: 4px;
      transition: opacity 0.3s ease;
    }
    #loadMore {
      padding: 10px 16px;
      width: auto;
      display: inline-block;
      text-align: center;
      background-color: #33739E;
      color: #fff;
      border: none;
      border-radius: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.1);
      cursor: pointer;
      font-size: 14px;
      margin: 15px 0;
      transition: all 0.3s ease;
    }
    #loadMore:hover {
      background-color: #2a5d7c;
      transform: translateY(-1px);
    }
    .p { color: #666; font-style: italic; margin: 10px 0; }
  </style><div class="nextContent">内容项 #1</div>
<div class="nextContent">内容项 #2</div>
<div class="nextContent">内容项 #3</div>
<div class="nextContent">内容项 #4</div>
<div class="nextContent">内容项 #5</div>
<div class="nextContent">内容项 #6</div>
<div class="nextContent">内容项 #7</div>
<div class="nextContent">内容项 #8</div>

<button id="loadMore">加载更多</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script><script>
$(function() {
  const batchSize = 2; // 每次显示条数
  let loadedCount = 0;

  // 初始化：显示前 batchSize 条
  $(".nextContent").slice(0, batchSize).show();

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

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

    // 计算下一批起始索引
    const start = loadedCount * batchSize;
    const end = start + batchSize;

    // 展开下一批（从隐藏项中选取）
    $(".nextContent:hidden").slice(start, end).slideDown(300);

    loadedCount++;

    // 检查是否还有隐藏项
    if ($(".nextContent:hidden").length === 0) {
      $(this).fadeOut(300, function() {
        $(this).replaceWith('<p class="p">没有更多内容了');
      });
    }

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