JSAccordion-replacingatraditionalforloopwithforEach

原文链接：https://www.javascripttutorial.net/javascript-foreach/

在JS Accordion中，通常使用for循环遍历HTML元素以将所有“手风琴”部分隐藏，在用户点击手风琴标题时只显示所选部分。虽然使用传统的for循环很有效，但使用forEach函数可以使代码更简洁和易于阅读。

下面是使用forEach重写JS Accordion的示例代码：

const accordions = document.querySelectorAll('.accordion');

accordions.forEach(accordion => {
  accordion.addEventListener('click', () => {
    accordion.classList.toggle('active');
    const panel = accordion.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + 'px';
    }
  });
});

在这个示例中，我们首先使用document.querySelectorAll来获取所有带有类名“accordion”的HTML元素。然后，我们使用forEach函数迭代每个手风琴元素，并添加单击事件侦听器。在单击事件侦听器中，我们切换手风琴元素的活动状态类（active），并根据当前面板的最大高度是否已定义，来设置面板的最大高度。

使用forEach函数代替for循环可以使代码更容易阅读，尤其是当你需要遍历多个元素时。