用javascript关闭多个编号的div

我正在开发一个简单的导航系统，使用香草javascript打开和关闭div面板。当前迭代有四个面板和四个打开它们的导航链接

我下面的当前代码工作正常，只需单击一个链接，打开相应的面板，再次单击该链接即可关闭该面板。但我想更进一步，如果面板2打开，单击链接4，面板2关闭，面板4打开。我的想法是在所有面板中循环并简单地关闭它们，但似乎无法使用像for，while这样的东西来实现

仅使用四个面板进行硬编码是很容易的，但随着时间的推移，这个数字可能会增加，我相信有一种方法可以更自动化地实现这一点

目标1
目标2
目标3
目标4
链接1
链接2
链接3
链接4
函数openNav（x）{
if（document.getElementById（“hdn”+x）.style.display==='block'）{
document.getElementById（“hdn”+x）.style.display=“无”；
}否则{
//需要首先确保所有其他hdn都已关闭，然后选择打开
document.getElementById（“hdn”+x）.style.display=“block”；
}
}

在这种情况下，一个好主意是向元素添加一个公共类，这样您就可以使用

document.getElementsByClassName

简单演示

函数openNav（x）{
if（document.getElementById（“hdn”+x）.style.display==='block'）{
document.getElementById（“hdn”+x）.style.display=“无”；
}否则{
//需要首先确保所有其他hdn都已关闭，然后选择打开
var targets=document.getElementsByClassName（'nav-target'）；
对于（让i=0；i向面板添加一个类
class=“panel”
，然后使用
抓取所有面板。querySelectorAll
在打开另一个面板之前关闭它们

function openNav(x) {
  if(document.getElementById("hdn" + x).style.display === 'block') {
      document.getElementById("hdn" + x).style.display = "none"; 
  } else {
      var panels = document.querySelectorAll('.panel');
      for(var i = 0; i < panels.length; i++){
          panels[i].style.display = 'none';
      }
      document.getElementById("hdn" + x).style.display = "block"; 
  }
}

函数openNav（x）{
if（document.getElementById（“hdn”+x）.style.display==='block'）{
document.getElementById（“hdn”+x）.style.display=“无”；
}否则{
var panels=document.querySelectorAll（'.panel'）；
对于（变量i=0；i
我不知道你所说的“但似乎无法用for、while之类的东西来实现”是什么意思，但这是可行的

对于现代浏览器您可以这样做：


函数openNav（x）{
if（document.getElementById（“hdn”+x）.style.display==='block'）{
document.getElementById（“hdn”+x）.style.display=“无”；
}否则{
[].forEach.call（document.querySelectorAll（`[id^=hdn]：not（hdn${x}）`），x=>x.style.display='none'）；
document.getElementById（“hdn”+x）.style.display=“block”；
}
}
目标1
目标2
目标3
目标4
链接1
链接2
链接3
链接4
“但似乎无法使用诸如for、while之类的工具使其正常工作。”您的尝试是什么样子的？您错过了
文档的一个倒勾。getElementsByClassName
谢谢。请问是什么让第二个更好？您提到了现代功能，但这些功能适用于较旧的浏览器吗？我们的客户涵盖了从最新的技术爱好者到“我仍然有光盘驱动器”的范围类型。@Tom，modern features指的是现代浏览器版本。所以很可能不是。其思想是，您可以轻松地切换/添加/删除元素的类，也可以轻松地选择DOM中的元素（
querySelector
接受完整的css选择器作为参数）.我注意到您的示例涉及开放3关闭2方面，但它们不允许关闭3（一个目标始终保持开放）。但如果我移动您的“全部关闭”在我当前代码的else部分中，我得到了open 3 close 3。所有答案都很好，但我选择了你的答案，因为它使用了现有id，而不是添加新类。