如何使用 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