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>