javascript - 使用 Vanilla javascript关闭多个编号的div

Question

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

我下面的当前代码可以很好地单击一个链接，打开相应的面板，再次单击该链接以关闭该面板。但我想更进一步，如果面板 2 打开并且您单击链接 4，则面板 2 关闭并打开面板 4。我的想法是遍历所有面板并简单地关闭它们，但似乎无法使用 for、while 之类的东西让它工作。

仅使用四个面板进行硬编码就足够简单了，但随着时间的推移，这个数字会增加，我相信有一种方法可以更自动地完成这项工作。

<div id='hdn1'>Target 1</div>
<div id='hdn2'>Target 2</div>
<div id='hdn3'>Target 3</div>
<div id='hdn4'>Target 4</div>

<span onclick="openNav(1)">Link 1</span>
<span onclick="openNav(2)">Link 2</span>
<span onclick="openNav(3)">Link 3</span>
<span onclick="openNav(4)">Link 4</span>

<script>
  function openNav(x) {

    if (document.getElementById("hdn" + x).style.display === 'block') {
      document.getElementById("hdn" + x).style.display = "none";
    } else {
      // need to first make sure all other hdn are closed, then open selected
      document.getElementById("hdn" + x).style.display = "block";
    }
  }
</script>

Answer 1

在这种情况下，一个好主意是为元素添加一个公共(public)类，这样您就可以轻松地使用 document.getElementsByClassName

定位它们

简单演示

function openNav(x) {

  if (document.getElementById("hdn" + x).style.display === 'block') {
    document.getElementById("hdn" + x).style.display = "none";
  } else {
    // need to first make sure all other hdn are closed, then open selected
    var targets = document.getElementsByClassName('nav-target');
    for(let i = 0;i<targets.length;i++){
      targets[i].style.display = 'none';
    }
    document.getElementById("hdn" + x).style.display = "block";
  }
}

.nav-target {
  display: none;
}

<div id='hdn1' class="nav-target">Target 1</div>
<div id='hdn2' class="nav-target">Target 2</div>
<div id='hdn3' class="nav-target">Target 3</div>
<div id='hdn4' class="nav-target">Target 4</div>

<span onclick="openNav(1)">Link 1</span>
<span onclick="openNav(2)">Link 2</span>
<span onclick="openNav(3)">Link 3</span>
<span onclick="openNav(4)">Link 4</span>

---

更好的方法是通过类处理显示/隐藏(还使用更现代的功能，如 querySelector、querySelectorAll、classList 等)

function openNav(x) {
  var targetSelector = '#hdn' + x,
      otherSelector = '.nav-target.open:not('+targetSelector+')';
  
  document.querySelectorAll(otherSelector).forEach(function(node){
    node.classList.remove('open');
  });
  
 document.querySelector(targetSelector).classList.toggle('open');
}

.nav-target {
  display: none;
}
.nav-target.open{
  display:block;
}

<div id='hdn1' class="nav-target">Target 1</div>
<div id='hdn2' class="nav-target">Target 2</div>
<div id='hdn3' class="nav-target">Target 3</div>
<div id='hdn4' class="nav-target">Target 4</div>

<span onclick="openNav(1)">Link 1</span>
<span onclick="openNav(2)">Link 2</span>
<span onclick="openNav(3)">Link 3</span>
<span onclick="openNav(4)">Link 4</span>