設置javascript標簽

Question

再會。 我在 javascript 上寫標簽。 這些標簽背后的想法非常普遍，但與標准標簽略有不同。 當我點擊“+”按鈕時，所有選項卡都應該關閉，只有被點擊的選項卡應該打開。 一切正常，但我無法在第二次單擊按鈕時實現選項卡的關閉

HTML

        <div class="faq__tab">
          <div class="faq__tab__question">
            Какие вложения необходимы для того, чтобы<br>
            начать торговать на Wildberries?
            <div class="faq__tab__qeustion-btn" data-tab='0'></div>
          </div>
          <div class="faq__tab__answer">
            <span class="tab-answer">
              Какие вложения необходимы для того, чтобы<br>
              начать торговать на Wildberries?
            </span>
          </div>
        </div>

JS

const tabButtons = document.querySelectorAll('.faq__tab__qeustion-btn');
const tabAnswers = document.querySelectorAll('.faq__tab__answer');
const answer = document.querySelectorAll('tab-answer');

let tabClicked = false;

tabButtons.forEach((btn, index) => {

  btn.addEventListener('click', selectTab)

})

function selectTab() {

  tabButtons.forEach(button => {
    button.classList.remove('faq__tab__qeustion-btn--active');
  });

  tabAnswers.forEach(answer => {
    answer.classList.remove('faq__tab__answer--active');
  })

  this.classList.add('faq__tab__qeustion-btn--active');
  tabAnswers[this.getAttribute('data-tab')].classList.add('faq__tab__answer--active');

}

Answer 1

將選項卡的原始狀態保存在一個變量中，然后在全部關閉后在單擊的選項卡上切換與原始狀態相反的狀態。

tabButtons.forEach((btn) => {
    btn.addEventListener('click', selectTab)
});
function selectTab() {
    const tab = tabAnswers[this.dataset.tab];
    const makeThisActive = !tab.classList.contains('faq__tab__answer--active');
    tabButtons.forEach(button => {
        button.classList.remove('faq__tab__qeustion-btn--active');
    });
    tabAnswers.forEach(answer => {
        answer.classList.remove('faq__tab__answer--active');
    })
    this.classList.toggle('faq__tab__qeustion-btn--active', makeThisActive);
    tab.classList.toggle('faq__tab__answer--active', makeThisActive);
}

我也建議固定qeustion -看起來像一個錯字，和錯別字是編程錯誤的常見原因。