0
181
VistasJS: Cómo asegurarse de que solo el div secundario esté activado al hacer clic
El ejemplo dado funciona bien, pero el color rojo se muestra solo en Box2.
Cómo asegurarse de que si se hace clic en el cuadro 1, se debe mostrar rojo debajo del cuadro 1, si se hace clic en el cuadro 2, el cuadro debe mostrarse debajo del cuadro 2.
function hideshowmenu() { var element = document.getElementsByClassName("box"); element[0].classList.toggle("bg-red"); } .bg-red { margin-top: 10px; background-color: red; height: 20px; } <div class="mainmenu " onclick="hideshowmenu()">BOX1</div> <div id="box" class="box"></div> <div class="mainmenu " onclick="hideshowmenu()">BOX2</div> <div id="box" class="box"></div>solo se debe mostrar un rojo a la vez.
3 Respuestas
Responde la pregunta0
Primero elimine las identificaciones, no las necesita (y no son únicas, por lo que no son válidas de todos modos).
Luego, deberá .mainmenu todos los elementos del menú principal y hacer un clic para ocultar todos los cuadros y abrir el que está justo al lado del elemento en el que hizo clic.
document.querySelectorAll(".mainmenu").forEach(function(menuElement) { menuElement.addEventListener("click", function() { document.querySelectorAll(".box").forEach(function(boxElement) { boxElement.classList.remove("bg-red"); }); this.nextElementSibling.classList.toggle("bg-red"); }); }); .bg-red { margin-top: 10px; background-color: red; height: 20px; } <div class="mainmenu">BOX1</div> <div class="box"></div> <div class="mainmenu">BOX2</div> <div class="box"></div> <div class="mainmenu">BOX3</div> <div class="box"></div> <div class="mainmenu">BOX4</div> <div class="box"></div> <div class="mainmenu">BOX5</div> <div class="box"></div> <div class="mainmenu">BOX6</div> <div class="box"></div> <div class="mainmenu">BOX7</div> <div class="box"></div>0
Solo activas [0]
yo delegaría
También eliminé la identificación ya que las identificaciones deben ser únicas.
const container = document.getElementById("container"); const boxes = container.querySelectorAll(".box") container.addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("mainmenu")) { const thisBox = tgt.nextElementSibling; boxes.forEach(box => { if (box != thisBox) box.classList.remove("bg-red"); }) thisBox.classList.toggle("bg-red"); } }) .bg-red { margin-top: 10px; background-color: red; height: 20px; } <div id="container"> <div class="mainmenu">BOX1</div> <div class="box"></div> <div class="mainmenu">BOX2</div> <div class="box"></div> </div>0
Debe usar el objeto de evento para obtener un nodo de destino y luego agregar div con la clase después de él. La función after moverá el div cada vez.
<div class="mainmenu" onClick="hideshowmenu(event)">BOX1</div> <div class="mainmenu" onClick="hideshowmenu(event)">BOX2</div> const redBox = document.createElement('div'); redBox.classList.add('bg-red'); function hideshowmenu(event) { const elem = event.target; elem.after(redBox) }