如何在forEach循环中实现toogle显示功能？

Question

我需要设置“阅读更多”链接，以在单击时切换剩余内容的显示。

该脚本循环遍历模块DIV中的段落元素。它使用样式属性跳过第一个p元素，并隐藏其余的p元素。为每次迭代创建一个a元素，并将其附加在第一个p元素之后。单击a元素时应显示隐藏的p元素。如何将toggleCopy重写为forEach循环函数？

<div class="module">
  <h2>Sample Heading</h2>
  <p>
  Project summary paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In ornare quam viverra orci sagittis eu volutpat odio facilisis. Nunc mi ipsum faucibus vitae aliquet nec ullamcorper sit. Tortor dignissim convallis aenean et tortor at risus viverra adipiscing.
  </p>
  <p>
  Project development changes paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque dignissim enim sit amet venenatis urna cursus.
  </p>
</div>

使用newLink添加了addEventListerner功能的当前for循环。

// Use for loop to select all 'p' elements
function toggleCopy(e) {
  for(let i = 0; i < allParagraphs.length; i++) {
    // Assign each iteration to 'para'
    let para = allParagraphs[i];
    // If the iteration is the first 'p' element, bypass and continue the loop
    if(i === 0) {
      continue;
    }
    // For all remaining 'p' elements, set the 'display' to 'block' if currently set to'none',
    // if 'display' is not set, set it to 'none'
    if(para.style.display === 'none') {
      para.style.display = 'block';
    } else {
      para.style.display = 'none';
    }
  }
  // If the newLink 'a' element has been clicked, remove it from the DOM
  if(this === newLink) {
    this.remove();
  }
  // Check the 'e' event behaviour, and if it is not 'undefined' set 'e.preventDefault' to prevent
  // the default 'href' behaviour
  if(e !== undefined && e.preventDefault !== undefined) {
    e.preventDefault(); 
  }
}

// Set the event listener on the newLink 'a' element to be 'click', and assign the 'toggleCopy'
// function
newLink.addEventListener('click', toggleCopy);

新的forEach功能。 toggleCopy函数适合放在哪里？

// Create an anonymous function that executes immediately on load
(function() {
  // Select all of the '.module' divs in the '.modules' parent div    
  let modules = document.querySelectorAll('.module');

  modules.forEach(function (module) {
    let ps = module.querySelectorAll('p');
    let fps = ps[0];

    ps.forEach(function (p, i) {
      // Create 'a' element, and assign to newLink constant
      const newLink = document.createElement('a');

      // Set 'href' and 'class' attributes for the 'a' element
      newLink.setAttribute('href', '#');
      newLink.setAttribute('class', 'read-more');

      // Set the innerHTML text for the 'a' element
      newLink.innerHTML = 'Read more';

      newLink.addEventListener('click', function(e) {
        if(this === newLink) {
          this.remove();
        }
        if(e !== undefined && e.preventDefault !== undefined) {
          e.preventDefault(); 
        }

        if(p.style.display === 'none') {
          p.style.display = 'block';
        }
      });

      if(i === 0) {
        return;
      }
      p.style.display = 'none';

      fps.appendChild(newLink);
    });
  });
}());