使用纯JavaScript单击div元素时，删除或激活特定状态

Question

过去几天，我提交了一个关于分页的问题（如何使用纯JavaScript在CSS中添加和删除活动状态），我得到了一个很好的答案。还有一些相同的问题，就是我这次只有在单击另一个div时才删除活动状态。

let questions = document.querySelectorAll('.question__container'),
questionBar = document.querySelectorAll('#bar'),
questionClose = document.querySelectorAll('.paragraph__close'),
answers = document.querySelectorAll('.answers__container');

/* activeBar / activeAnswer */

function resetQuestions() {
    for (let i = 0; i < questions.length; i++) {
        questionBar[i].classList.remove('activeBar');
        answers[i].classList.remove('activeAnswer');
    }
}

function addActiveAnswer() {
    for (let i = 0; i < questions.length; i++) {
        questions[i].addEventListener('click', function() {
            resetQuestions();
            questionBar[i].classList.add('activeBar');
            answers[i].classList.add('activeAnswer');

            questionClose[i].addEventListener('click', function() {
                resetQuestions();
            });
        });
    }
}
addActiveAnswer();

我正在尝试构建所谓的“问答页面”，当用户单击一个问题时，下面的答案就会淡出，但是当单击关闭div元素时，resetQuestions();不会执行。

在此先感谢您的回答。