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

Question

我有一个类.submenu-toggle的两个切换,它们包含一个带有类.submenu的ul子.我想要发生的是当用户点击.submenu-toggle时,显示该类(子菜单切换)的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轻松完成此菜单.但这是一个使用vanilla 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;
}

演示 - Codepen