hide show menu 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; 

//编辑 我修好了，感谢阿伦P佐尼。

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>