单击外部关闭按钮 div 时，div 数组不会关闭 (Javascript)

Question

其实我在制作手风琴的时候遇到了一个情况。我已经在我的 div 中添加了一个关闭按钮（x 文本）来关闭手风琴，但是在我点击它之后它不会关闭。顺便说一句，我的参考设计来自 https://dribbble.com/shots/6584063-Daily-UI-Accordion-Cards-Experiment。这只是行为的例子。就像在我的参考中一样，我不想在第一次有一个活跃的 class。然后当点击其他标签时，当前活动的class是不活动的，并且有一个外部关闭按钮。

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>

请帮我解决这个问题。非常感谢。

Answer 1

您的代码段中存在两个问题：

const button = document.querySelectorAll('b'); 将 select 所有 <b/> 元素，而不是带有 class .b 的元素；下面更新为 const button = document.querySelectorAll('.b');
您的关闭按钮在您的手风琴内部。因此，当您的关闭功能正在运行并删除 .active class 时，手风琴的点击处理程序将被触发并立即重新打开它。在处理程序中添加 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>

单击外部关闭按钮 div 时，div 数组不会关闭 (Javascript)

div array won't close when external close button div is clicked (Javascript)

javascript

html

css

accordion