javascript - 隐藏显示菜单getElementsByClassName

我想用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。

最佳答案

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