求助：实现点击显示FAQ答案，避免鼠标悬停导致答案消失

嘿，我懂你遇到的麻烦了——你想要的是点击触发FAQ答案显示/隐藏，而不是依赖鼠标悬停（毕竟悬停一离开就消失，完全不符合需求）。之前的代码应该是用了CSS的:hover伪类来控制显示，这就是问题所在。咱们换成JavaScript来管理状态，就能实现点击后答案一直保留，直到你点击下一个FAQ或者再次点击当前项。

完整实现代码 #

HTML部分

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="faq-container">
        <div class="faq-item">
            <div class="faq-question">第一个FAQ问题？</div>
            <div class="faq-answer hidden">这是第一个FAQ的答案，点击问题就能显示/隐藏我啦！</div>
        </div>
        <div class="faq-item">
            <div class="faq-question">第二个FAQ问题？</div>
            <div class="faq-answer hidden">这是第二个FAQ的答案，点击其他问题我会自动隐藏哦！</div>
        </div>
        <div class="faq-item">
            <div class="faq-question">第三个FAQ问题？</div>
            <div class="faq-answer hidden">这是第三个FAQ的答案，操作逻辑和上面一样~</div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS部分（style.css）

.faq-container {
    max-width: 600px;
    margin: 20px auto;
}

.faq-item {
    margin-bottom: 15px;
    border: 1px solid #eee;
    border-radius: 4px;
}

.faq-question {
    padding: 12px 15px;
    background-color: #f5f5f5;
    cursor: pointer;
    font-weight: bold;
}

.faq-answer {
    padding: 12px 15px;
    background-color: #fff;
}

/* 默认隐藏答案 */
.hidden {
    display: none;
}

/* 可选：给激活的问题加个样式，提示用户当前选中的项 */
.faq-question.active {
    background-color: #e0e0e0;
}

JavaScript部分（script.js）

// 获取所有FAQ问题元素
const faqQuestions = document.querySelectorAll('.faq-question');

faqQuestions.forEach(question => {
    question.addEventListener('click', () => {
        // 获取当前问题对应的答案
        const answer = question.nextElementSibling;
        // 获取所有其他已打开的答案元素
        const otherAnswers = document.querySelectorAll('.faq-answer:not(.hidden)');
        
        // 排他逻辑：如果当前答案是隐藏的，先关闭所有已打开的答案
        if (answer.classList.contains('hidden')) {
            otherAnswers.forEach(ans => {
                ans.classList.add('hidden');
                // 同时移除对应问题的激活样式
                ans.previousElementSibling.classList.remove('active');
            });
            // 打开当前答案
            answer.classList.remove('hidden');
            question.classList.add('active');
        } else {
            // 如果当前答案是显示的，就关闭它
            answer.classList.add('hidden');
            question.classList.remove('active');
        }
    });
});

代码说明 #

1. 核心逻辑：用JavaScript的click事件替代CSS的:hover，通过切换hidden类来控制答案的显示/隐藏，彻底摆脱鼠标悬停的限制。
2. 排他性处理：当点击一个新的FAQ问题时，会自动关闭之前打开的所有答案，确保页面上同时只有一个答案显示（如果你想要允许多个答案同时打开，只需要去掉排他逻辑的部分，只保留当前答案的切换即可）。
3. 用户体验优化：给激活的问题添加active样式，让用户清楚知道当前选中的是哪个FAQ项。

这样修改后，你点击FAQ问题，答案就会一直显示在页面上，直到你点击其他问题或者再次点击当前问题来关闭它，完美解决你之前鼠标悬停消失的问题！

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