JS：如何確保只有一個 html 元素可見

Question

我有兩個列表，目前兩個列表同時切換，我希望一次只能看到一個列表項，

如果我單擊列表一，則只列出一項應該可見，反之亦然。

代碼

當前，兩個列表項都在單擊時顯示。

 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>

Answer 1

您可以委托和切換您已經擁有的隱藏

注意我在隱藏的div中添加了一個類

 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>