クリックされたクラスの子をトグルします。純粋なJavascript - no JQuery

Question

私はクラス.submenu-toggleで2つのトグルを持ち、クラス.submenuを持つulの子を含んでいます。私がしたいのは、ユーザーが.submenu-toggleをクリックすると、そのクラスのサブメニュー（サブメニュー）が表示され、それが再びクリックされると非表示になります。

これを実現するには、JQueryを使用せずに純粋なJavascriptを使用する必要があります。

ユーザーがその要素の外側をクリックすると.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でこのメニューを行うことができます。 CSSを使用せずにCodepen