單擊外部關閉按鈕div時，div陣列不會關閉（Javascript）

我在制作手風琴時實際上正在發生一種情況。我已經在我的 div 中添加了一個關閉按鈕（x 文本）來關閉手風琴，但是單擊它后它不會關閉。順便說一句，我的參考設計來自https://dribbble.com/shots/6584063-Daily-UI-Accordion-Cards-Experiment。這只是行為的示例。就像在我的參考資料中一樣，我不想第一次參加活躍的課程。然后當單擊另一個選項卡時，當前活動類處于非活動狀態，并且有一個外部關閉按鈕。

document.addEventListener("DOMContentLoaded", (e) => {

  const accordion = document.querySelectorAll('.a');
  const button = document.querySelectorAll('b');

  /* add Class from the div itself being clicked */
  accordion.forEach((accs, idx) => {
    accs.addEventListener('click', () => {
      addActive(accs, idx);
    });
  });

  function addActive(el, index) {
    el.classList.add('active');
    accordion.forEach((accs, idx) => {
      if (idx !== index) {
        accs.classList.remove("active");
      }
    });
  }

  /* remove class from button */
  button.forEach(xer => {
    xer.addEventListener('click', () => {
      removeActive();
    });
  });

  function removeActive() {
    accordion.forEach(accs => {
      accs.classList.remove('active');
    })
  }
})

.toggle {
  display: none
}

.a .b {
  display: none;
}

.a.active {
  color: blue;
}

.a.active .b {
  color: rgba(0, 0, 0, 1);
  display: block;
  cursor: pointer;
}

<div id="1" class="a"> Source
  <div id="button-1" class="b"> x </div>
</div>

<div id="2" class="a"> Share
  <div id="button-2" class="b"> x </div>
</div>

<div id="3" class="a"> Report
  <div id="button-3" class="b"> x </div>
</div>

請幫我解決這個問題。非常感謝。

uj5u.com熱心網友回復：

您的代碼段中有兩個問題：

1. const button = document.querySelectorAll('b');將選擇所有<b/>元素，而不是具有 class 的元素.b；下面更新為const button = document.querySelectorAll('.b');
2. 你的關閉按鈕在你的手風琴里面。因此，當您的關閉函式正在作業并洗掉.active該類時，手風琴的單擊處理程式正在觸發并立即重新打開它。在處理程式內部添加一個e.stopPropagation();阻止事件冒泡到父級并解決了問題。

請參閱下面的作業示例：

document.addEventListener("DOMContentLoaded", (e) => {

  const accordion = document.querySelectorAll('.a');
  const button = document.querySelectorAll('.b');

  /* add Class from the div itself being clicked */
  accordion.forEach((accs, idx) => {
    accs.addEventListener('click', () => {
      addActive(accs, idx);
    });
  });

  function addActive(el, index) {
    el.classList.add('active');
    accordion.forEach((accs, idx) => {
      if (idx !== index) {
        accs.classList.remove("active");
      }
    });
  }

  /* remove class from button */
  button.forEach(xer => {
    xer.addEventListener('click', (e) => {
      e.stopPropagation();
      removeActive();
    });
  });

  function removeActive() {
    accordion.forEach(accs => {
      accs.classList.remove('active');
    })
  }
})

.toggle {
  display: none
}

.a .b {
  display: none;
}

.a.active {
  color: blue;
}

.a.active .b {
  color: rgba(0, 0, 0, 1);
  display: block;
  cursor: pointer;
}

<div id="1" class="a"> Source
  <div id="button-1" class="b"> x </div>
</div>

<div id="2" class="a"> Share
  <div id="button-2" class="b"> x </div>
</div>

<div id="3" class="a"> Report
  <div id="button-3" class="b"> x </div>
</div>

標籤：javascript html css 手风琴

上一篇：如何根據使用GAS的范圍內的單詞出現來增加2個字母的集合？

下一篇：NodeJS：在執行時間方面，是否生成一組承諾然后使用Promise.all比回圈并立即等待每個任務更好？