Javascript 隐藏显示菜单getElementsByClassName

我想用JavaScript制作一个隐藏/显示菜单。我必须至少在我的menuHeader中使用getElementsByClassName！我已经修正了，所以我只能隐藏和显示第一个菜单内容。我想点击一个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; 

函数菜单函数（）{
var ele=document.getElementsByClassName（“menuContent”）[0]；
对于（变量i=0；i

//编辑

---

我修复了它，谢谢Arun P Johny。

因为

var ele=document.getElementsByClassName（“menuContent”）[0]

将始终返回类为

menuContent

的第一个元素

var menu=[].slice.call（document.getElementsByClassName（“menuHeader”），0）；
对于（变量i=0；i

因为
var ele=document.getElementsByClassName（“menuContent”）[0]
将始终返回类为
menuContent
的第一个元素


var menu=[].slice.call（document.getElementsByClassName（“menuHeader”），0）；
对于（变量i=0；i











“我必须至少在我的menuHeader中使用GetElementsByCassName”-为什么GetElementsByCassName（）
，但是，例如，
document.querySelectorAll（）
是。实际上，IE9+支持它。您的问题是，您正在获取文档中的第一个
menuContent
元素，而不是单击的元素。“我必须至少在我的menuHeader中使用getElementsByClassName”-为什么GetElementsByCassName（）

，但是，例如，

document.querySelectorAll（）

是。实际上，IE9+支持它。您的问题是，您正在获取文档中的第一个

menuContent

元素，而不是单击的元素。您好，当我使用您的代码时，如果我将“var contents”和“var menu”放在函数init中，则会出现以下错误：ReferenceError:contents未定义如果我将“var contents”在“function init”之外我得到了这个错误：ReferenceError:menu没有定义我做错了什么？？嗨，当我使用你的代码时，如果我把“var contents”和“var menu”放在function init中，我会得到以下错误：ReferenceError:contents没有定义我想把“var menu”放在“function init”里面，如果我放了“var contents”“outside”function init“我得到这个错误：ReferenceError:菜单未定义我做错了什么？？