切换点击类纯JavaScript的孩子 - 没有JQuery

Question

我有两个切换类.submenu切换，他们包含一个类与.submenu的UL子。我想要发生的事情是，当用户点击.submenu切换该类（子菜单切换）的ul子（.submenu）时会显示，然后再次单击它时会隐藏。

我需要使用纯JavaScript而不使用任何JQuery来实现此目的。

如果您还可以让我知道如何隐藏.submenu，如果用户在该元素之外单击的话......那太棒了！

感谢您的时间和帮助。

这里是我当前的Javascript：

 // Drop Down Menus 
     var subToggle = document.getElementsByClassName("submenu-toggle"); 
     var menu = subToggle.children; 

     for (var i = 0; i < subToggle.length; i++) { 
      subToggle.item(i).onclick = function() { 

       menu[1].style.display = "block"; 
      } 
     } 

这里是我当前的HTML：

<ul> 
    <li class="submenu-toggle"><a href="#">Menu 1</a> 
     <ul class="submenu"> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
     </ul> 
    </li> 
    <li class="submenu-toggle"><a href="#">Menu 2</a> 
     <ul class="submenu"> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
      <li></li> 
     </ul> 
    </li> 
</ul> 

Answer 1

你可以很容易地做到这一点菜单，CSS。但这里的香草JavaScript的一个例子：

// JS 
var submenu = document.getElementsByClassName("submenu-toggle"); 

for (var i = 0; i < submenu.length; i++) { 
    submenu[i].addEventListener('click', menus, false); 
} 

function menus() { 
    var menu = this.querySelector('.submenu'); 
    menu.classList.toggle("hidden"); 
}; 

// CSS 

.hidden { 
    display: none; 
} 

DEMO - Codepen