Disculpas de antemano, no estoy muy familiarizado con Javascript, pero entiendo lo que está haciendo este código y por qué me está causando este problema. Simplemente no estoy seguro de cómo resolverlo en absoluto.
En mi página web, tengo un conmutador de diálogo abierto/cerrado que es el div principal, el cuadro de diálogo está oculto al cargar la página. Dentro de este cuadro de diálogo hay más divs ocultos para las opciones de diálogo. El problema es que, cuando se hace clic en una de las opciones de diálogo, la secuencia de comandos oculta todo el cuadro de diálogo, evitando que se vea cualquiera de las opciones de diálogo, porque solo puede mostrar un div a la vez, independientemente de su estado principal o secundario. Cuando se hace clic en un div, todos los demás div se vuelven a ocultar. Necesito que el div principal permanezca visible hasta que se vuelva a hacer clic en el cuadro de diálogo. Las opciones individuales SÍ necesitan ocultarse/mostrar cuando se hace clic en otra opción.
No estoy seguro de si debo incluir algún CSS aquí, solo está diseñando el cuadro de diálogo y sus botones dentro.
<div id="dialogue" style="display:none;"> <div class="room"> Room description here. What do you do? <div class="buttons"> <a href="#" onclick="divVisibility('cat');">Pet the cat.</a> <br> <div id="cat" style="display:none;">aw yeah kitty time</div> <a href="#" onclick="divVisibility('radio');">Turn on the radio.</a> <br> <div id="radio" style="display:none;"> <br> audio file and tracklist here </div> </div> </div> </div> <span class="toggle"> <a href="#" onclick="divVisibility('dialogue');">[Open/close dialogue.]</a> </span> <script type="text/javascript"> var divs = ["cat", "radio", "dialogue"]; var visibleDivId = null; function divVisibility(divId) { if(visibleDivId === divId) { visibleDivId = null; } else { visibleDivId = divId; } hideNonVisibleDivs(); } function hideNonVisibleDivs() { var i, divId, div; for(i = 0; i < divs.length; i++) { divId = divs[i]; div = document.getElementById(divId); if(visibleDivId === divId) { div.style.display = "block"; } else { div.style.display = "none"; } } } </script>Probablemente necesite una tercera función aquí porque actualmente todos los conmutadores están agrupados, por lo que están interactuando de esta manera, pero no tengo ni idea de cómo lograr esto. He estado buscando y no he encontrado nada que se ajuste a mis necesidades.
Hizo algunas correcciones a su HTML para que href no actualice la página al hacer clic. También se agregaron algunos atributos (controles aria) para rastrear qué div controla el botón. Agregué comentarios al JavaScript. Hay muchos atributos de Aria que normalmente ayudan con la accesibilidad, pero son muy útiles para realizar un seguimiento de las cosas en HTML y pasar información a JavaScript.
//create a function to handle the click that takes in the event as a argument function handleClick(event) { //find out which div the button controls const ariaControls = event.currentTarget.getAttribute("aria-controls"), //select the controlled div controlledAria = document.getElementById(ariaControls); // if the controlled div is cat if (ariaControls === "cat") { // hide the radio div document.getElementById("radio").classList.add("hide"); // if the controlled div is radio } else if (ariaControls === "radio") { // hide the car div document.getElementById("cat").classList.add("hide"); } //toggle the hide div on the controlled div controlledAria.classList.toggle("hide"); } //select all the buttons const buttons = document.querySelectorAll("button"); //for each button add an event listener when the button is clicked run the handle click function buttons.forEach(button => button.addEventListener("click", handleClick)) .hide { display: none; } <div id="dialogue" class="hide"> <div class="room"> Room description here. What do you do? <div class="buttons"> <button aria-controls="cat">Pet the cat.</button><br> <div id="cat" class="hide">aw yeah kitty time</div> <button aria-controls="radio">Turn on the radio.</button><br> <div id="radio" class="hide">audio file and tracklist here </div> </div> </div> </div> <span class="toggle"><button aria-controls="dialogue">[Open/close dialogue.]</button></span>