打开/关闭菜单上，单击使用只有JavaScript没有jQuery的

Question

这是我的html文件

<form id="form1" runat="server"> 
    <div class ="mvbar"> 
     <ul> 
      <li><a href ="m">Home</a></li> 
      <li><a href ="m">About</a></li> 
      <li class="pjlist" onclick="load"><a href ="m">Projects</a> 
       <div class="sub1"> 
       <ul> 
        <div class="arrow1"></div> 
        <li><a href ="m">Projects1</a></li> 
        <li><a href ="m">Projects2</a></li> 
        <li><a href ="m">Projects3</a></li> 
       </ul> 
       </div> 
      </li> 
      <li class="svlist" onclick="load"><a href ="m">Services</a> 
       <div class="sub2"> 
       <ul> 
        <div class="arrow2"></div> 
        <li><a href ="m">Services1</a></li> 
        <li><a href ="m">Services2</a></li> 
        <li><a href ="m">Services3</a></li> 
        <li><a href ="m">Services4</a></li> 
        <li><a href ="m">Services5</a></li> 
       </ul></div> 
      </li> 
      <li><a href ="m">Contact Us</a></li> 
     </ul> 
    </div> 
    </form> 

，这是我的CSS类

.mvbar ul { 
    list-style:none; 
    margin:0; 
    padding:0; 
} 

.mvbar li { 
    float:left; 
    width:15%; 
    text-align:center; 
    background-color:grey; 
    border-right:1px solid white; 
    position:relative; 
} 

.mvbar li ul{ 
    position:absolute; 
    top:30px; 
} 

.mvbar li ul li{ 
    float:none; 
    width:210%; 
    text-align:left; 
    padding-left:4px; 

} 


.mvbar a { 
    font-family:'Meiryo UI',Verdana,sans-serif; 
    color:black; 
    text-decoration:none; 
    display:block; 
} 

.arrow1 { 
    width:0; 
    height:0; 
    border-left:12px solid transparent; 
    border-right:12px solid transparent; 
    border-bottom:12px solid grey; 
    position:relative; 
    right:-80%; 
} 

.arrow2 { 
    width:0; 
    height:0; 
    border-left:12px solid transparent; 
    border-right:12px solid transparent; 
    border-bottom:12px solid grey; 
    position:relative; 
    right:-80%; 
} 

.sub1 { 
    visibility:hidden; 
} 

.sub2 { 
    visibility:hidden; 
} 

我可以做同样的事情在CSS，但需要很多为了在每个浏览器中工作而添加的异常，但是javascript是我之前没有用过的东西，并且我被建议使用它可以相当容易。 所以，请有人告诉我如何打开/关闭仅使用JavaScript的子菜单。

在此先感谢！

Answer 1

试试这个将''悬停'事件不''点击'，但全CSS的工作。

.mvbar ul { 
    list-style:none; 
    margin:0; 
    padding:0; 
} 

.mvbar li { 
    float:left; 
    width:15%; 
    text-align:center; 
    background-color:grey; 
    border-right:1px solid white; 
    position:relative; 
} 

.mvbar li ul{ 
    position:absolute; 
    top: 100%; 
    width: 50%; 
} 

.mvbar li ul li{ 
    float:none; 
    width:210%; 
    text-align:left; 
    padding-left:4px; 

} 


.mvbar a { 
    font-family:'Meiryo UI',Verdana,sans-serif; 
    color:black; 
    text-decoration:none; 
    display:block; 
} 

.arrow2, 
.arrow1 { 
    width:0; 
    height:0; 
    border-left:12px solid transparent; 
    border-right:12px solid transparent; 
    border-bottom:12px solid grey; 
    position:relative; 
    right:-80%; 
} 

.sub1, 
.sub2 
{ 
    visibility:hidden; 
} 


ul li:hover div 
{ 
    visibility: visible; 
} 

ul li:hover ul 
{ 
    visibility: visible; 
} 

Answer 2

试试这个：

<style> 
    .mvbar ul { 
     list-style:none; 
     margin:0; 
     padding:0; 
    } 

    .mvbar li { 
     float:left; 
     width:15%; 
     text-align:center; 
     background-color:grey; 
     border-right:1px solid white; 
     position:relative; 
    } 

    .mvbar li ul{ 
     position:absolute; 
     top: 100%; 
     width: 50%; 
    } 

    .mvbar li ul li{ 
     float:none; 
     width:210%; 
     text-align:left; 
     padding-left:4px; 

    } 


    .mvbar a { 
     font-family:'Meiryo UI',Verdana,sans-serif; 
     color:black; 
     text-decoration:none; 
     display:block; 
    } 

    .arrow2, 
    .arrow1 { 
     width:0; 
     height:0; 
     border-left:12px solid transparent; 
     border-right:12px solid transparent; 
     border-bottom:12px solid grey; 
     position:relative; 
     right:-80%; 
    } 

    .sub1, 
    .sub2 
    { 
     visibility: hidden; 
    } 

</style> 
     <form id="form1" runat="server"> 
    <div class ="mvbar"> 
     <ul> 
      <li><a href ="m">Home</a></li> 
      <li><a href ="#">About</a></li> 
      <li id="pjlist"><a href ="#">Projects</a> 
       <div class="sub1"> 
        <ul> 
         <div class="arrow1"></div> 
         <li><a href ="m">Projects1</a></li> 
         <li><a href ="m">Projects2</a></li> 
         <li><a href ="m">Projects3</a></li> 
        </ul> 
       </div> 
      </li> 
      <li id="svlist" onclick="load"><a href ="m">Services</a> 
       <div class="sub2"> 
       <ul> 
        <div class="arrow2"></div> 
        <li><a href ="m">Services1</a></li> 
        <li><a href ="m">Services2</a></li> 
        <li><a href ="m">Services3</a></li> 
        <li><a href ="m">Services4</a></li> 
        <li><a href ="m">Services5</a></li> 
       </ul></div> 
      </li> 
      <li><a href ="m">Contact Us</a></li> 
     </ul> 
    </div> 
    </form> 
    </body> 
</html> 
<script> 
    var myMenu = document.getElementById("pjlist"); 
    var open = false; 
    myMenu.addEventListener("click", function() 
    { 
     if(open) 
     { 
      //then close 
      open = !open; 
      var mySubMenu = myMenu.getElementsByTagName('div'); 
      mySubMenu[0].style.visibility = 'hidden'; 
     } 
     else 
     { 
      //open 
      open = !open; 
      var mySubMenu = myMenu.getElementsByTagName('div'); 
      mySubMenu[0].style.visibility = 'visible'; 
     } 
    }); 

</script> 

您可以使用

var myMenus = document.getElementsByClassName() 

添加上你所有的菜单孩子的事件监听。

好运