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

问题描述 投票：0回答：3

我正在创建用于存档新闻项目的侧边栏菜单。我的列表显示了新闻项的年份：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>
javascript
3个回答
1
投票

触发click事件时，您应该查找所有其他活动的下拉菜单并删除该类。它将变成这样：

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) {
      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”并避免循环，但这可能更安全。

1
投票

[每当您切换下拉菜单时，就从所有其他类别中删除active类。另外，最好将active类添加到下拉容器中，然后在使用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>
0
投票

尝试一下，首先onclick，您必须隐藏所有我在额外代码中所做的下拉列表

var dropdown = document.getElementsByClassName("dropdown-btn-2");
var dropdown2 = document.getElementsByClassName("dropdown-container-2");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  for (i = 0; i < dropdown.length; i++) {
 dropdown2[i].style.display='none';
 }
    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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.