如何使用CSS3、JS或jQuery实现问卷div元素上滑切换显示效果

完全可以通过CSS3 + 原生JavaScript/jQuery实现你的需求，不需要依赖Bootstrap Carousel，也支持你后端PHP动态决定下一题跳转顺序的逻辑。

核心思路 #

把原来hover触发的临时过渡效果，改成由JS控制添加自定义类触发持久过渡效果，切换逻辑完全自主可控，可对接后端动态返回的下一题标识。

完整实现代码 #

1. CSS 代码 #

* {
    box-sizing: border-box;
}
/* 问卷可视容器 */
.question-container {
    width: 600px; /* 可自定义宽度 */
    height: 400px; /* 可自定义单题高度 */
    overflow: hidden;
    position: relative;
    border: 1px solid #eee;
}
/* 滑动层 */
.question-slide {
    position: absolute;
    top: 0;
    width: 100%;
    transition: all 0.8s ease; /* 滑动时长可自定义 */
}
/* 单题样式 */
.question-item {
    width: 100%;
    height: 400px; /* 和容器高度保持一致 */
    padding: 20px;
}
/* 向上滑出的触发类 */
.slide-up {
    top: -400px; /* 数值和单题高度一致 */
}

2. HTML 结构 #

<div class="question-container">
    <div class="question-slide" id="slideWrap">
        <!-- 当前展示的题目 -->
        <div class="question-item" id="q1">
            问题1：你平时使用什么前端框架？
            <button class="submit-answer">提交答案</button>
        </div>
        <!-- 下一题会动态插入到这里 -->
        <div class="question-item" id="nextQuestion"></div>
    </div>
</div>

3. JavaScript 逻辑 #

const slideWrap = document.getElementById('slideWrap');
const submitBtn = document.querySelector('.submit-answer');
let currentQid = 1; // 记录当前题目ID

submitBtn.addEventListener('click', function() {
    // 1. 收集当前题目答案
    const answer = '用户提交的答案内容';

    // 2. 发送请求到PHP后端，获取下一题内容
    fetch('/get_next_question.php', {
        method: 'POST',
        body: JSON.stringify({
            current_qid: currentQid,
            answer: answer
        })
    }).then(res => res.json())
    .then(data => {
        // 后端返回示例：{code:200, next_qid: 5, question_content: "问题5的内容...", is_last: false}
        if(data.code === 200) {
            // 3. 把返回的下一题内容填充到对应节点
            document.getElementById('nextQuestion').innerHTML = data.question_content;
            // 4. 给滑动层加类触发向上滑出效果
            slideWrap.classList.add('slide-up');

            // 5. 动画结束后重置状态，准备下一次切换
            setTimeout(() => {
                // 把下一题移到当前题的位置
                slideWrap.innerHTML = `
                    <div class="question-item" id="q${data.next_qid}">
                        ${data.question_content}
                        <button class="submit-answer">提交答案</button>
                    </div>
                    <div class="question-item" id="nextQuestion"></div>
                `;
                // 移除滑动类，恢复滑动层初始位置
                slideWrap.classList.remove('slide-up');
                // 更新当前题目ID
                currentQid = data.next_qid;
                // 重新绑定提交按钮事件
                document.querySelector('.submit-answer').addEventListener('click', arguments.callee);
            }, 800); // 时长和CSS里的过渡时长保持一致
        }
    })
});

方案说明 #

• 滑动效果由CSS过渡实现，流畅度高，你可以自行调整过渡时长和动画曲线
• 下一题完全由PHP后端返回决定，不需要提前把所有题目按固定顺序渲染到页面，也支持根据用户作答结果动态跳转不同题目
• 30道题的场景完全适配，最后一题提交后可以直接渲染提交成功的提示即可

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