我需要你的幫助。我的代碼結構是這樣的：
<div class="header">
<p>Button</p>
<ul>
<li>Option 1</>
<li>Option 2</>
<li>Option 3</>
</ul>
</div>
我想在 p 標簽上使用 addEventListener，點擊它我們需要隱藏和顯示 ul。這是我的朋友挑戰問題之一，請任何人幫助我如何實作這一目標。p 標簽在頭類中。我不能改變格式，需要這樣表達。我想用純 javascrript 來解決這個問題
代碼筆鏈接：
uj5u.com熱心網友回復：
通過選擇器選擇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'
})
uj5u.com熱心網友回復：
如果您想將其添加到多個元素
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/389893.html