FAQ折叠面板单开功能异常求助：点击多问题后答案全展开

嘿，我懂你现在的困扰——点击某个FAQ问题时，所有答案都跟着展开了，而不是只显示当前点击的那个，其余自动收起对吧？这问题其实挺常见的，核心原因就是你的代码只处理了当前点击元素的状态，没管其他问题的答案。

从你贴的faqs.js片段来看，你已经能获取到点击的h2和对应的答案div，但缺少了关闭其他已展开答案的逻辑。我给你两种修复方案，你可以根据自己的需求选：

方案一：直接操作样式显示隐藏 #

这种方式适合简单场景，直接修改元素的display属性：

"use strict"; 
var $ = function(id) { return document.getElementById(id); }; 

// 每个h2元素点击事件的处理函数 
var toggle = function() { 
    var h2 = this; // 被点击的h2标签 
    var div = h2.nextElementSibling; // 获取对应的答案div

    // 先把所有其他答案都隐藏
    const allAnswers = document.querySelectorAll('.faq-answer'); // 假设你的答案div有这个类名
    allAnswers.forEach(answer => {
        if (answer !== div) {
            answer.style.display = 'none';
        }
    });

    // 切换当前答案的显示状态
    div.style.display = div.style.display === 'block' ? 'none' : 'block';
};

// 初始化绑定事件
var init = function() {
    const allQuestions = document.querySelectorAll('.faq-question'); // 假设你的h2有这个类名
    allQuestions.forEach(question => {
        question.addEventListener('click', toggle);
    });
};

// 页面加载完成后初始化
window.onload = init;

方案二：用CSS类名控制（更优雅） #

推荐这种方式，把样式逻辑交给CSS，JS只负责切换类名，维护起来更方便：

首先在CSS里添加样式：

.faq-answer {
    display: none;
}
.faq-answer.active {
    display: block;
}

然后修改JS代码：

"use strict"; 
var $ = function(id) { return document.getElementById(id); }; 

var toggle = function() { 
    var h2 = this; 
    var div = h2.nextElementSibling; 

    // 移除所有答案的active类，关闭其他答案
    document.querySelectorAll('.faq-answer').forEach(answer => {
        answer.classList.remove('active');
    });

    // 切换当前答案的active类（点击同一问题可以收起）
    div.classList.toggle('active');
};

var init = function() {
    const allQuestions = document.querySelectorAll('.faq-question');
    allQuestions.forEach(question => {
        question.addEventListener('click', toggle);
    });
};

window.onload = init;

注意事项 #

你的HTML结构最好是每个问题和答案成对包裹，比如：

<div class="faq-item">
    <h2 class="faq-question">第一个问题？</h2>
    <div class="faq-answer">第一个问题的答案...</div>
</div>
<div class="faq-item">
    <h2 class="faq-question">第二个问题？</h2>
    <div class="faq-answer">第二个问题的答案...</div>
</div>

如果你的类名和示例不一样，记得把代码里的.faq-question和.faq-answer换成你实际用的类名哦。

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