[英]How to display only one item at a time using JavaScript
I'm creating a sidebar menu for Archiving news items.我正在为归档新闻项目创建一个侧边栏菜单。 My list shows the years of the news items: 2019, 2018, 2017. When clicked these then display a drop-down container showing the months - September 2019, August 2019, etc.
我的列表显示了新闻项目的年份:2019 年、2018 年、2017 年。单击这些后会显示一个下拉容器,显示月份 - 2019 年 9 月、2019 年 8 月等。
I'm using a bit of JavaScript to display the drop-down container.我使用了一点 JavaScript 来显示下拉容器。 The problem I have is that when you click on 2019 and then 2018 both years are showing their relevant months.
我遇到的问题是,当您单击 2019 年和 2018 年时,这两年都显示了它们的相关月份。 How do I only show the information for one year at a time?
如何一次只显示一年的信息? ie when clicking on 2019 it displays the months for that year, then when I click on 2018 the content for 2019 hides and only the content for 2018 then shows.
即当单击 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>
Whenever you toggle a dropdown, remove the active
class from all the other ones.每当您切换下拉列表时,请从所有其他下拉列表中删除
active
的 class。
Also it's better to add the active
class to the dropdown container and then hide the content when that class is missing using css.此外,最好将
active
的 class 添加到下拉容器中,然后在 class 缺失时使用 css 隐藏内容。
Finally, I think it's more neat to manage each group separately (loop the dropdown containers and then add the event listener to the button that is inside them).最后,我认为单独管理每个组更整洁(循环下拉容器,然后将事件侦听器添加到其中的按钮)。
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>
Keep in mind that if cannot have smooth transitions when using display: none
and display: block
to hide and show the element ( opacity:0
and opacity:1
works)请记住,如果使用
display: none
和display: block
来隐藏和显示元素时不能平滑过渡( opacity:0
和opacity:1
有效)
When the click event is fired, you should look for all the other active dropdowns and remove the class.当点击事件被触发时,您应该查找所有其他活动下拉菜单并删除 class。 It will become something like this:
它会变成这样:
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>
Since only one element will be shown at a time, you can also use "querySelector" instead of "querySelectorAll" and avoid the loop, but this is probably safer.由于一次只显示一个元素,您也可以使用“querySelector”而不是“querySelectorAll”并避免循环,但这可能更安全。
How about updating ONLY your javascript like this:像这样只更新你的 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"; }); }
Check all other containers and hide them检查所有其他容器并隐藏它们
toggles show/hide if you are clicking on the same element如果您单击同一元素,则切换显示/隐藏
codePen available Here: https://codepen.io/ermiarch/pen/XWrQodo此处提供代码笔: https://codepen.io/ermiarch/pen/XWrQodo
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.