0
175
VistasJS: cómo asegurarse de que solo un elemento html sea visible
tengo dos listas, actualmente Ambas listas se alternan a la vez, quiero que solo los elementos de una lista estén visibles a la vez,
si hago clic en la lista uno, solo los elementos de la lista uno deberían estar visibles y viceversa.
Actualmente, ambos elementos de la lista se muestran al hacer clic.
var dropdown = document.getElementsByClassName("dropdown-btn"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { this.classList.toggle("active"); var dropdownContent = this.nextElementSibling; if (dropdownContent.style.display === "block") { dropdownContent.style.display = "none"; } else { dropdownContent.style.display = "block"; } }); } <div class=" dropdown-btn font-bold text-lg text-gray-700 ml-4 mt-3 cursor-pointer">LIST ONE</div> <div class="hidden"> <div class="cursor-pointer w-full border-gray-100 items-start border-b-2 " style="height:40px"> <div class=" text-base text-gray-700 ml-10 mt-7 ">option 1</a> </div> </div> <div class="w-full border-gray-100 items-start border-b-2" style="height:40px"> <div class=" text-base text-gray-700 ml-10 mt-3"> option 2</a> </div> </div> </div> <div class="w-full border-gray-100 items-start border-b-2"> <div class="dropdown-btn font-bold text-lg text-gray-700 ml-4 mt-8 cursor-pointer" style="height:40px">LIST TWO </div> <div class="hidden"> <div class="w-full border-gray-100 items-start border-b-2" style="height:40px"> <div class=" text-base text-gray-700 ml-10 mt-1"><a href=>option 1</a></div> </div> <div class="w-full border-gray-100 items-start border-b-2" style="height:40px"> <div class=" text-base text-gray-700 ml-10 mt-3"><a href=>option 2</a></div> </div> </div> </div> </div>
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede delegar y alternar el oculto que ya tiene
Tenga en cuenta que agregué una clase al div oculto
const lists = document.querySelectorAll(".list") const buttons = document.querySelectorAll(".dropdown-btn") document.getElementById("container").addEventListener("click", function(e) { const tgt = e.target; if (tgt.classList.contains("dropdown-btn")) { tgt.classList.toggle("active"); const thisList = tgt.nextElementSibling; const show = tgt.classList.contains('active') lists.forEach(list => list.classList.toggle("hidden", !show || list !=thisList)) buttons.forEach(btn => btn.classList.toggle("active",btn === tgt && show)) } }); .hidden { display: none; } .active { color: red; } <div id="container"> <div class=" dropdown-btn font-bold text-lg text-gray-700 ml-4 mt-3 cursor-pointer">LIST ONE</div> <div class="hidden list"> <div class="cursor-pointer w-full border-gray-100 items-start border-b-2 " style="height:40px"> <div class=" text-base text-gray-700 ml-10 mt-7 "><a href="">option 1</a> </div> </div> <div class="w-full border-gray-100 items-start border-b-2" style="height:40px"> <div class="text-base text-gray-700 ml-10 mt-3"><a href="">option 2</a> </div> </div> </div> <div class="w-full border-gray-100 items-start border-b-2"> <div class="dropdown-btn font-bold text-lg text-gray-700 ml-4 mt-8 cursor-pointer" style="height:40px">LIST TWO </div> <div class="hidden list"> <div class="w-full border-gray-100 items-start border-b-2" style="height:40px"> <div class=" text-base text-gray-700 ml-10 mt-1"><a href="">option 1</a></div> </div> <div class="w-full border-gray-100 items-start border-b-2" style="height:40px"> <div class=" text-base text-gray-700 ml-10 mt-3"><a href="">option 2</a></div> </div> </div> </div> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta