如何实现.section div的逐个显示/隐藏？首个元素始终可见

没问题，我帮你搞定这个需求！下面是完整的实现代码，包含HTML、CSS和JavaScript，完全匹配你的要求：

完整代码示例 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Section 显示/隐藏控制</title>
    <style>
        .section {
            padding: 15px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: none; /* 默认隐藏所有section */
        }
        /* 第一个section始终默认显示 */
        .section:first-of-type {
            display: block;
        }
        .control-btn {
            padding: 8px 16px;
            margin-right: 10px;
            cursor: pointer;
            border: none;
            border-radius: 4px;
            background-color: #409eff;
            color: white;
        }
        .control-btn:nth-of-type(2) {
            background-color: #6c757d;
        }
    </style>
</head>
<body>
    <div class="section">这是第1个Section（始终可见）</div>
    <div class="section">这是第2个Section</div>
    <div class="section">这是第3个Section</div>
    <div class="section">这是第4个Section</div>

    <button class="control-btn" id="showBtn">显示下一个</button>
    <button class="control-btn" id="hideBtn">隐藏最后一个可见项</button>

    <script>
        // 获取所有section元素和按钮
        const sections = document.querySelectorAll('.section');
        const showBtn = document.getElementById('showBtn');
        const hideBtn = document.getElementById('hideBtn');

        // 显示按钮逻辑：找到第一个隐藏的section并显示它
        showBtn.addEventListener('click', () => {
            for (let section of sections) {
                // 同时判断内联样式和计算后的样式，避免样式优先级问题
                if (section.style.display === 'none' || window.getComputedStyle(section).display === 'none') {
                    section.style.display = 'block';
                    break; // 只显示第一个隐藏的，实现依次展示
                }
            }
        });

        // 隐藏按钮逻辑：找到最后一个可见的section（排除第一个）并隐藏
        hideBtn.addEventListener('click', () => {
            // 从后往前遍历，跳过第一个section
            for (let i = sections.length - 1; i > 0; i--) {
                const section = sections[i];
                if (window.getComputedStyle(section).display !== 'none') {
                    section.style.display = 'none';
                    break; // 只隐藏最后一个可见的
                }
            }
        });
    </script>
</body>
</html>

代码细节解释 #

HTML部分 #

• 我们创建了多个.section容器，第一个是默认要始终显示的核心内容
• 两个控制按钮分别对应“显示下一个”和“隐藏最后一个可见项”的操作，语义清晰

CSS部分 #

• 默认给所有.section设置display: none隐藏，再用:first-of-type选择器强制第一个section保持显示，确保它永远不会被初始隐藏
• 给按钮加了基础样式，区分不同功能的按钮，提升交互体验

JavaScript核心逻辑 #

• 显示按钮：遍历所有section，找到第一个处于隐藏状态的元素，把它设置为显示后立刻终止循环——完美实现“依次展示下一个”的效果，不会一次性显示所有内容
• 隐藏按钮：从最后一个section往前遍历（特意跳过第一个），找到第一个可见的元素就隐藏它，终止循环——保证只会隐藏最后一个可见的section，且第一个section永远不会被触发隐藏操作

这个方案是纯原生实现，兼容性拉满，不需要依赖任何框架，你可以直接复制代码测试，也能根据自己的需求调整样式和section数量~

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