javascript - 隐藏显示菜单 getElementsByClassName

Question

我想用 JavaScript 制作一个隐藏/显示菜单。我必须至少在我的 menuHeader 中使用 getElementsByClassName!我已修复，因此我可以仅隐藏和显示第一个 menuContent。我想单击一个 menuHeader，以便打开 menuHeader 下的 menuContent!如何在不执行多个功能的情况下隐藏和显示其他内容(menuContent2)？是否可以？我可以用循环解决这个问题吗？

这是我的 HTML 代码:

<a class="menuHeader">SPORT</a><br>
    <div class="menuContent">//**It only opens this Content no matter which menuHeader I click on!**
    <a href="">Result</a><br>
    <a href="">Live</a><br>
    <a href="">Standing</a><br>
    </div>

    <a class="menuHeader">NEWS</a><br>
    <div class="menuContent2">
    <a href="">Local</a><br>
    <a href="">World</a><br>
    </div>

这是我的 JavaScript 代码:

    function menuFunction(){

    var ele = document.getElementsByClassName("menuContent")[0];

    for(var i = 0; i < ele.length; i++)
    {
    ele[i];
    }


    if(ele.style.display == "none") {
            ele.style.display = "block";

    }
    else {
        ele.style.display = "none";

    }


}

   function init(){

   var menu = document.getElementsByClassName("menuHeader");
    for(var i = 0; i < pic.length; i++) {
    {
        menu[i].onclick = menuFunction;
    }

   }

   } 

   window.onload = init; 

//编辑我修好了，谢谢 Arun P Johny。

Answer 1

因为 var ele = document.getElementsByClassName("menuContent")[0]; 将始终返回类为 menuContent 的第一个元素。

var menu = [].slice.call(document.getElementsByClassName("menuHeader"), 0);
for (var i = 0; i < menu.length; i++) {
  menu[i].onclick = menuFunction;
}

var contents = document.getElementsByClassName("menuContent");

function menuFunction() {
  var ele = contents[menu.indexOf(this)];
  if (ele.style.display == "none") {
    ele.style.display = "block";
  } else {
    ele.style.display = "none";
  }
}

<a class="menuHeader">SPORT</a><br/>
<div class="menuContent">
  <a href="">Result</a><br/>
  <a href="">Live</a><br/>
  <a href="">Standing</a><br/>
</div>

<a class="menuHeader">NEWS</a><br/>
<div class="menuContent">
  <a href="">Local</a><br/>
  <a href="">World</a><br/>
</div>