necesito tu ayuda. Mi estructura de código es así:
<div class="header"> <p>Button</p> <ul> <li>Option 1</> <li>Option 2</> <li>Option 3</> </ul> </div>Quiero usar addEventListener aquí en la etiqueta p, al hacer clic en él, debemos ocultar y mostrar ul. Esta es una de las preguntas de desafío de mis amigos, por favor, alguien que me ayude a lograr esto. La etiqueta p está dentro de la clase de encabezado. No puedo cambiar el formato, necesito implementarlo así. Quiero usar javascript puro para este problema.
Seleccione el DOM a través del selector, agregue eventos de clic, cambie variables
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>En caso de que quieras agregarlo a varios elementos
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>