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>