Hice un script que cuando hago clic en el contenedor oculta una lista. Sin embargo, lo que he estado tratando de hacer es que la lista se oculte al hacer clic fuera del contenedor y no dentro . He estado buscando respuestas, pero nada realmente funcionó para mí mientras uso las clases. ¿Alguien sabe una solución?
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width" /> <title>Hiding the list</title> </head> <body> <h1>Hiding the list</h1> <div class="list">Hide the list by clicking outside <li>Text1</li> <li>Text2</li> <li>Text3</li> </div> <div class="list">Hide the list by clicking outside <li>Text1</li> <li>Text2</li> <li>Text3</li> </div> </body> </html> <style> .list { width: 50%; height: 100%; background-color: #f2f2f2; } li { } </style> <script> function hide_list() { var children = this.children; for (let i = 0; i < children.length; i++) { children[i].style.display = "none"; } } document.querySelectorAll(".list").forEach(function (elem) { elem.addEventListener("click", hide_list); }); </script>