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;

// EDIT 我修好了，谢谢Arun P Johny。

Answer 1

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

＆＃13;

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";
  }
}

＆＃13;

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

＆＃13;

隐藏显示菜单getElementsByClassName

1 个答案: