小编Ste*_*hen的帖子

嗨，我是 vanilla JavaScript 的新手，并试图很好地理解它。我创建了一个多下拉菜单导航，其中在单击下拉按钮时由单击事件触发菜单，将.show具有块显示属性的 CSS 类添加到下拉菜单中。我遇到的问题是，当我打开一个菜单并单击另一个下拉菜单按钮时，我希望关闭当前/所有其他菜单。我不太确定我将如何实现这一目标。非常感谢任何帮助，谢谢。

这是JS：

(function() {

  var dropBtns = document.querySelectorAll('.dropdown');

  dropBtns.forEach(function(btn) {

    btn.addEventListener('click', function(e) {
      var dropContent = btn.querySelector('.dropMenu');
      e.preventDefault();

      if (!dropContent.classList.contains('show')) {
        dropContent.classList.add('show');
      } else {
        dropContent.classList.remove('show');
      }
      e.stopPropagation();
    });


  });

  //   close menus when clicking outside of them
  window.addEventListener('click', function(event) {
    if (event.target != dropBtns) {
      openMenus = document.querySelectorAll('.dropMenu');
      openMenus.forEach(function(menus) {
        menus.classList.remove('show');
      });
    }
  });

})();

这是CSS：

.room-sort {
  background: #434A54;
  margin: 0;
  padding: 0;
  text-align: center;
}

.room-sort-menu ul {
  margin: 0; …