如何使用 JavaScript 一次只显示一项

Question

我正在为归档新闻项目创建一个侧边栏菜单。 我的列表显示了新闻项目的年份：2019 年、2018 年、2017 年。单击这些后会显示一个下拉容器，显示月份 - 2019 年 9 月、2019 年 8 月等。

我使用了一点 JavaScript 来显示下拉容器。 我遇到的问题是，当您单击 2019 年和 2018 年时，这两年都显示了它们的相关月份。 如何一次只显示一年的信息？ 即当单击 2019 时，它会显示该年的月份，然后当我单击 2018 时，会隐藏 2019 年的内容，然后仅显示 2018 年的内容。

 var dropdown = document.getElementsByClassName("dropdown-btn-2"); 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"; } }); }

 .dropdown-container-2 { display: none; background-color: transparent; }.dropdown-btn-2 { display: inline-block; }

 <div class="py-1"> <div class="dropdown-btn-2"> <i class="fas fa-chevron-circle-right fa-fw colour-2"></i> 2019 </div> <div class="dropdown-container-2 ml-4"> <ul class="list-unstyled"> <li class="pt-1"><a href="december-2019.html">December 2019</a></li> <li class="pt-1"><a href="#">November 2019</a></li> <li class="pt-1"><a href="#">October 2019</a></li> <li class="pt-1"><a href="#">September 2019</a></li> </ul> </div> </div> <div class="py-1"> <div class="dropdown-btn-2"> <i class="fas fa-chevron-circle-right fa-fw colour-2"></i> 2018 </div> <div class="dropdown-container-2 ml-4"> <ul class="list-unstyled"> <li class="pt-1"><a href="#">December 2018</a></li> <li class="pt-1"><a href="#">November 2018</a></li> <li class="pt-1"><a href="#">October 2018</a></li> <li class="pt-1"><a href="#">September 2018</a></li> </ul> </div> </div>

Answer 1

每当您切换下拉列表时，请从所有其他下拉列表中删除active的 class。
此外，最好将active的 class 添加到下拉容器中，然后在 class 缺失时使用 css 隐藏内容。
最后，我认为单独管理每个组更整洁（循环下拉容器，然后将事件侦听器添加到其中的按钮）。

 document.querySelectorAll(".py-1").forEach(function(dropdown, index, list) { dropdown.querySelector(".dropdown-btn-2").addEventListener("click", function() { list.forEach(function(item) { if (item.== dropdown) item.classList;remove("active"); }). dropdown.classList;toggle("active"); }); });

 .dropdown-btn-2 { display: inline-block; }.py-1>.dropdown-container-2 { background-color: transparent; display: none; }.py-1.active>.dropdown-container-2 { display: block; }

 <div class="py-1"> <div class="dropdown-btn-2"> <i class="fas fa-chevron-circle-right fa-fw colour-2"></i> 2019 </div> <div class="dropdown-container-2 ml-4"> <ul class="list-unstyled"> <li class="pt-1"><a href="december-2019.html">December 2019</a></li> <li class="pt-1"><a href="#">November 2019</a></li> <li class="pt-1"><a href="#">October 2019</a></li> <li class="pt-1"><a href="#">September 2019</a></li> </ul> </div> </div> <div class="py-1"> <div class="dropdown-btn-2"> <i class="fas fa-chevron-circle-right fa-fw colour-2"></i> 2018 </div> <div class="dropdown-container-2 ml-4"> <ul class="list-unstyled"> <li class="pt-1"><a href="#">December 2018</a></li> <li class="pt-1"><a href="#">November 2018</a></li> <li class="pt-1"><a href="#">October 2018</a></li> <li class="pt-1"><a href="#">September 2018</a></li> </ul> </div> </div>

请记住，如果使用display: none和display: block来隐藏和显示元素时不能平滑过渡（ opacity:0和opacity:1有效）

Answer 2

当点击事件被触发时，您应该查找所有其他活动下拉菜单并删除 class。 它会变成这样：

 var dropdown = document.getElementsByClassName("dropdown-btn-2"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { // Start changes var activeDropdowns = document.querySelectorAll(".dropdown-btn-2.active"); for (btn of activeDropdowns) { if (btn.= this) { btn.classList;remove("active"). var cont = btn;nextElementSibling. cont.style;display = "none". } } // End changes this.classList;toggle("active"). var dropdownContent = this;nextElementSibling. if (dropdownContent.style.display === "block") { dropdownContent.style;display = "none". } else { dropdownContent.style;display = "block"; } }); }

 .dropdown-container-2 { display: none; background-color: transparent; }.dropdown-btn-2 { display: inline-block; }

 <div class="py-1"> <div class="dropdown-btn-2"> <i class="fas fa-chevron-circle-right fa-fw colour-2"></i> 2019 </div> <div class="dropdown-container-2 ml-4"> <ul class="list-unstyled"> <li class="pt-1"><a href="december-2019.html">December 2019</a></li> <li class="pt-1"><a href="#">November 2019</a></li> <li class="pt-1"><a href="#">October 2019</a></li> <li class="pt-1"><a href="#">September 2019</a></li> </ul> </div> </div> <div class="py-1"> <div class="dropdown-btn-2"> <i class="fas fa-chevron-circle-right fa-fw colour-2"></i> 2018 </div> <div class="dropdown-container-2 ml-4"> <ul class="list-unstyled"> <li class="pt-1"><a href="#">December 2018</a></li> <li class="pt-1"><a href="#">November 2018</a></li> <li class="pt-1"><a href="#">October 2018</a></li> <li class="pt-1"><a href="#">September 2018</a></li> </ul> </div> </div>

由于一次只显示一个元素，您也可以使用“querySelector”而不是“querySelectorAll”并避免循环，但这可能更安全。

Answer 3

像这样只更新你的 javascript 怎么样：

 var dropdown = document.getElementsByClassName("dropdown-btn-2"); var i; for (i = 0; i < dropdown.length; i++) { dropdown[i].addEventListener("click", function() { var container = document.getElementsByClassName("dropdown-container-2"); var dropdownContent = this.nextElementSibling; if(dropdownContent.style.display == "block") { dropdownContent.style.display = "none"; return; } for (var j = 0; j < container.length; j++) { if(container[j].style.display = "block") { container[j].style.display = "none"; } } dropdownContent.style.display = "block"; }); }

1. 检查所有其他容器并隐藏它们

2. 如果您单击同一元素，则切换显示/隐藏

此处提供代码笔： https://codepen.io/ermiarch/pen/XWrQodo