jQuery点击show more按钮如何动态展示分类下全部隐藏div并关闭其他分类展开项

架构老林

2026-10-2

问题排查与解决方案

问题根因

同一分类下所有超出初始展示数量的文章div使用了相同的id属性，HTML规范要求id全局唯一，因此jQuery ID选择器仅能匹配到第一个符合条件的元素，导致点击按钮后仅显示1篇文章。

修改方案

1. 修复PHP端DOM输出逻辑

替换两处重复ID的输出代码：

分类父容器重复ID修改：

// 原代码
echo '<div id="parentId">';
// 替换为
echo "<div class='category-container' data-cat-id='{$current_category}'>";

隐藏文章重复ID修改：

// 原代码
echo ("<div class='card recrutements hide-block'  id='$cat'>");
// 替换为
echo ("<div class='card recrutements hide-block category-{$cat}' data-category='{$cat}'>");

2. 替换jQuery交互逻辑

实现「点击后收起其他分类展开内容、当前分类每次新增显示4篇隐藏文章」的需求：

$(document).ready(function(){
    $(".show-more").click(function(){
        const currentCatId = $(this).data("id");
        // 收起其他分类的所有已展开隐藏文章
        $(".hide-block").not(`.category-${currentCatId}`).css("display", "none");
        // 恢复其他分类的按钮状态
        $(".show-more").not(this).text("Show more").removeClass("disabled");
        // 选中当前分类未展示的隐藏文章，取前4篇展示
        const currentHiddenList = $(`.category-${currentCatId}.hide-block:hidden`);
        currentHiddenList.slice(0,4).css("display", "block");
        // 无更多内容时修改按钮状态
        if(currentHiddenList.length <= 4){
            $(this).text("无更多内容").addClass("disabled");
        }
    });
});