如何在文章列表中添加“加载更多”按钮

使用时 文章列表元素一次显示太多文章会让页面显得冗长，难以浏览。提高可读性的一个简单方法是添加…… 了解更多 按钮初始状态只显示部分列表，点击后展开全部内容。

在你开始之前

添加“加载更多”功能之前，请确保您已具备以下条件：

• An 文章列表元素 已添加到页面
• A 按钮元素 那将用作 了解更多 按键
• 此 元素 ID 这两个要素

您需要这些 ID 才能正确更新脚本。

如何添加“加载更多”按钮

按照以下步骤创建“加载更多”行为。

步骤 1：添加按钮元素

首先，在文章列表下方添加一个按钮。

• 拖一个 按钮元素 在你的下面 文章列表

• 将按钮文本更改为： 了解更多

• 根据需要设置按钮样式

此按钮将触发展开操作。

步骤二：复制元素 ID

您需要复制以下元素的 ID：

• 此 文章列表元素
• 此 按钮元素

复制元素 ID：

• 右键单击该元素
• 点击 复制 → 复制元素 ID
• 保存复制的ID

您需要将代码中的示例 ID 替换为实际的 ID。

步骤 3：添加自定义代码元素

添加 自定义代码元素.

然后将以下 HTML 代码粘贴到“自定义代码”元素中。

document.addEventListener("DOMContentLoaded", function () {

 const target = document.querySelector('[data-id="gMwtAAckG5"]');

 const button = document.querySelector('.g4FCNC2MEY'）;

 如果（目标）{

   target.style.height = "400px";

 }

 如果（按钮 && 目标）{

   button.addEventListener("click", function () {

     target.style.height = "100%";

     button.style.display = "无";

   }）;

 }

}）;





[data-id="gMwtAAckG5"]{

 溢出：隐藏！重要；

}

步骤 4：替换示例元素 ID

在上面的代码中，您必须将示例 ID 替换为您自己的 ID。

更换：

gMwtAAckG5

使用：

• 您的 文章列表元素 ID

更换：

g4FCNC2MEY

使用：

• 您的 按钮元素 ID

“加载更多”功能的工作原理

添加代码后：

1. 文章列表最初只会显示 400px 高度
2. 额外文章将被隐藏
3. 当用户点击 了解更多:

• 完整列表随即显示。
• 按钮消失了。

这样就创建了一个简洁明了的展开交互。

您可以控制点击前显示的文章数量。 了解更多.

在代码中找到这一行：

target.style.height = “400px”;

更改 400px 转换为另一个值，例如：

• 300px → 显示更少文章
• 500px → 显示更多文章
• 600px → 显示更多

根据您的布局调整此值。