如何在纯Javasvript中从父级到子级添加addEventListener？

Question

我需要你的帮助。我的代码结构是这样的：

<div class="header">
  <p>Button</p>
  <ul>
    <li>Option 1</>
    <li>Option 2</>
    <li>Option 3</>
  </ul>
</div>

我想在

addEventListener

标签上使用

p

，单击它时我们需要隐藏和显示 ul。

这是我朋友的挑战问题之一，请任何人帮助我如何实现这一目标。 p 标签位于标头类内部。我无法更改格式，需要像这样实现。我想使用纯 Javascript 来解决这个问题

Codepen 链接：

Answer 1

通过选择器选择DOM，添加点击事件，切换变量

const header = document.querySelector('.header')
const btn = header.querySelector('p')
const ul = header.querySelector('ul')
let isShow = false
btn.addEventListener('click', () => {
  isShow = !isShow
  ul.style.display = isShow ? 'none' : 'block'
})

<div class="header"> <p>Button</p> <ul> <li>Option 1</> <li>Option 2</> <li>Option 3</> </ul> </div>

Answer 2

如果您想将其添加到多个元素

const toggleVisibilityOfEl = (el) => el.style.visibility = (el.style.visibility == 'hidden' ? 'visible' : 'hidden')

// in case you add classes you can add the path to the element/ element here
const allPElements = document.querySelectorAll('p');
const allUlElements = document.querySelectorAll('ul')

 allPElements.forEach(e =>
    e.addEventListener('click', (event) =>
      allUlElements.forEach(toggleVisibilityOfEl)
    )
  )

<div class="header">
  <p>Button</p>
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
    <li>Option 3</li>
  </ul>
</div>