Quiero hacer un botón para mostrar una lista de elementos, y en la lista hay otro botón para cerrar o mostrar ninguna de las listas, pero no sé por qué no funciona.
let btn1 = document.querySelector('#btn1'); let btn2 = document.querySelector('#btn2'); let article = document.querySelector('article'); btn1.addEventListener('click', (e) => { article.style.display = 'flex'; }) btn2.addEventListener('click', (e) => { article.style.display = 'none'; }) div { position: relative; width: 100px; height: 100px; background-color: white; } article { position: absolute; left: 100px; display: none; flex-direction: column; } p { color: red; } span { position: absolute; right: -100px; color: white; } <div id="btn1"> <article> <p>hello world</p> <p>hello world</p> <p>hello world</p> <span id="btn2">btn2</span> </article> </div>texto fuerte
Hay algo sutil sucediendo en su escenario. Los divs que escuchan el evento de clic están anidados para que el evento de clic "burbujee" y se propague al padre, lo que produce un escenario en el que se llama a ambos controladores para el mismo clic -> por lo tanto, su elemento se oculta e inmediatamente después se muestra de nuevo.
Para evitar que eso suceda, llamé a event.stopPropagation() en la función que maneja el evento de clic para el elemento secundario.
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
let btn1 = document.querySelector('#btn1'); let btn2 = document.querySelector('#btn2'); let article = document.querySelector('article'); btn1.addEventListener('click', (e) => { article.style.display = 'flex'; }) btn2.addEventListener('click', (e) => { article.style.display = 'none'; event.stopPropagation(); }) div#btn1{ border: solid 1px red; cursor: pointer; } div { position: relative; width: 100px; height: 100px; background-color: white; border: solid 1px black; } article { position: absolute; left: 10px; display: none; flex-direction: column; border: solid 1px black; } p { color: red; } span { position: absolute; cursor: pointer; /* right: -100px; color: white;*/ } <div id="btn1"> <article> <p>hello world</p> <p>hello world</p> <p>hello world</p> <span id="btn2">Click Here</span> </article> </div>