点击淡入元素，全部div显示后隐藏按钮功能失效问题

嘿，我来帮你搞定这个问题～你现在的代码能实现每次点击显示2个隐藏的div，但因为没加「检查是否还有剩余隐藏内容」的逻辑，所以按钮一直不会自动消失对吧？

问题根源 #

原代码只处理了显示新div的动作，完全没判断什么时候所有.content元素都已经显示出来了，自然不会触发按钮隐藏的操作。而且原选择器$(".content").nextAll(':lt(2)')也有点小问题——如果前面的content不是连续的，可能会选到错误的元素，不如直接定位隐藏的内容块更靠谱。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .hide { display: none; }
        .button { 
            padding: 8px 16px; 
            cursor: pointer; 
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div class="content">Content 1</div>
    <div class="content">Content 2</div>
    <div class="content hide">Content 3</div>
    <div class="content hide">Content 4</div>
    <div class="content hide">Content 5</div>
    <div class="content hide">Content 6</div>
    
    <button class="button">显示更多</button>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
        $(".button").click(function() {
            // 选中前2个隐藏的content元素，淡入显示并移除hide类
            $(".content.hide").slice(0, 2).fadeIn("slow").removeClass("hide");
            
            // 检查是否还有隐藏的content元素
            if ($(".content.hide").length === 0) {
                // 没有剩余内容了，让按钮也平滑消失
                $(this).fadeOut("slow");
            }
        });
    </script>
</body>
</html>

关键改动说明 #

• 精准选择隐藏内容：用$(".content.hide").slice(0, 2)直接定位前2个隐藏的内容块，比nextAll更稳定，不管内容结构怎么变都能准确选中目标。
• 移除隐藏类：显示后把hide类去掉，避免下次点击时重复选中已经显示的元素。
• 检查剩余内容：每次点击后都判断$(".content.hide").length，当这个值为0时，说明所有内容都显示完了，就调用fadeOut让按钮和显示动画保持一致的节奏消失，体验更流畅。

内容的提问来源于stack exchange，提问作者Max Di Campo