Question

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

我下面的当前代码可以很好地单击链接，打开相应的面板，再次单击该链接以关闭该面板。但我想更进一步，如果面板2打开并单击链接4，则面板2关闭，面板4打开。我的想法是遍历所有面板并简单地关闭它们，但似乎无法使用，而

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

＆＃13;

<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>

＆＃13;

Answer 1

在这种情况下，一个好主意是为元素添加一个公共类，以便您可以使用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>

Answer 2

我不知道你对＆＃34; 的意思，但似乎无法使用类似的东西，而＆＃34;但是这个正在工作。

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

＆＃13;

function openNav(x) {
  if (document.getElementById("hdn" + x).style.display === 'block') {
    document.getElementById("hdn" + x).style.display = "none";
  } else {
    [].forEach.call(document.querySelectorAll(`[id^=hdn]:not(hdn${x})`), x => x.style.display = 'none');
    document.getElementById("hdn" + x).style.display = "block";
  }
}

＆＃13;

<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>

＆＃13;

如果您确实需要支持旧版浏览器，请执行以下操作：

＆＃13;

function openNav(x) {
  if (document.getElementById("hdn" + x).style.display === 'block') {
    document.getElementById("hdn" + x).style.display = "none";
  } else {
    var targets = document.querySelectorAll('[id^="hdn"]');
    for (var i = targets.length; i--;) {
      targets[i].style.display = 'none';
    }
    document.getElementById("hdn" + x).style.display = "block";
  }
}

＆＃13;

<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>

＆＃13;

请参阅：

Answer 3

在面板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"; 
  }
}

用vanilla javascript关闭多个编号的div

3 个答案: