javascript - 切换单击类的子级纯 Javascript - 无 JQuery

Question

我有两个带有 .submenu-toggle 类的切换开关，它们包含一个带有 .submenu 类的 ul 子级。我希望发生的是，当用户单击 .submenu-toggle 时，会显示该类(submenu-toggle)的 ul child(.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 - 代码笔