如何在纯 Javascript 中将 addEventListener 添加到从父级到子级？答案

【问题标题】：如何在纯 Javascript 中将 addEventListener 添加到从父级到子级？
【发布时间】：2022-01-23 12:20:05
【问题描述】：

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

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

我想在 p 标签上使用 addEventListener，点击它我们需要隐藏和显示 ul。这是我朋友的挑战问题之一，请任何人帮助我如何实现这一目标。 p 标签在标题类中。我不能改变格式，需要这样暗示。我想用纯 javascript 来解决这个问题

Codepen Link:

【问题讨论】：

请向我们展示您的尝试，同时请注意堆栈溢出不是编码服务。
我对此很陌生..你能帮忙吗[

标签： javascript html jquery ecmascript-6 frontend

【解决方案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'
})

&lt;div class="header"&gt; &lt;p&gt;Button&lt;/p&gt; &lt;ul&gt; &lt;li&gt;Option 1&lt;/&gt; &lt;li&gt;Option 2&lt;/&gt; &lt;li&gt;Option 3&lt;/&gt; &lt;/ul&gt; &lt;/div&gt;

【讨论】：

奖励：除了使用 Javascript，您还可以使用 details 和 summary 标签来切换文本。 developer.mozilla.org/en-US/docs/Web/HTML/Element/details

【解决方案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>

【讨论】：

如果您多次克隆 html，那么您会将所有 ul 隐藏 1 个按钮，我认为这不是故意的。，
我猜这不会是一个完整的项目。我永远不会推荐使用任何标签作为仅选择器类，或者最好是 Id。所以我想在这个用例中也可以这样做。但是你是有道理的，这肯定会导致意想不到的行为。