实现Load More转Load Less功能的JS代码调整需求

修改思路 #

原代码仅实现了加载更多的逻辑，要完成需求需要新增收起元素的分支逻辑，同时通过按钮文本区分当前操作模式：

• 初始状态：显示前8个.content，按钮显示「Load More」
• 加载阶段：每次点击显示8个隐藏元素，当所有元素都显示后，按钮切换为「Load Less」
• 收起阶段：每次点击隐藏最后8个可见元素，当回到初始的8个显示状态时，按钮切回「Load More」

修改后的完整代码 #

$(document).ready(function(){
  const initialShowCount = 8;
  // 初始化显示前8个元素
  $(".content").slice(0, initialShowCount).show();
  const $loadBtn = $("#loadMore");

  $loadBtn.on("click", function(e){
    e.preventDefault();
    
    if($loadBtn.text() === "Load More"){
      // 加载更多：显示前8个隐藏元素
      $(".content:hidden").slice(0, 8).slideDown();
      // 所有元素都显示后，切换按钮状态
      if($(".content:hidden").length === 0){
        $loadBtn.text("Load Less").removeClass("noContent");
      }
    } else {
      // 收起元素：隐藏最后8个可见元素（排除初始的8个）
      $(".content:visible").slice(-8).not(":lt(" + initialShowCount + ")").slideUp();
      // 回到初始状态后，切换按钮文本
      if($(".content:visible").length === initialShowCount){
        $loadBtn.text("Load More").removeClass("noContent");
      }
    }
  });
})

关键代码说明 #

1. 初始状态设置：用slice(0, 8)选中前8个元素并显示，同时缓存按钮元素减少重复DOM查询
2. 加载分支：判断按钮文本为「Load More」时，显示隐藏元素的前8个；当无隐藏元素时切换按钮为「Load Less」
3. 收起分支：
   • $(".content:visible").slice(-8)选中最后8个可见元素
   • .not(":lt(" + initialShowCount + ")")确保不会收起初始的8个元素
   • 当可见元素回到初始数量时，切回「Load More」按钮
4. 样式处理：移除原有的noContent类，避免按钮样式异常

内容的提问来源于stack exchange，提问作者Churchill