单击下一个下拉菜单打开器按钮时关闭上一个下拉菜单并保持该菜单打开答案

【问题标题】：Close the previous dropdown menu when click on the next dropdown menu opener button and keep that menu opened单击下一个下拉菜单打开器按钮时关闭上一个下拉菜单并保持该菜单打开
【发布时间】：2020-01-14 03:09:53
【问题描述】：

请先看页面了解https://ibnul.neocities.org/_temporary/au2p10/au2p10.html

这里我有多个下拉菜单，需要在单击它们各自的开启按钮（3 条形图标）时打开。而且它还需要在再次单击该图标或单击页面上的其他位置时关闭。

所以我设法在单击相应按钮时打开菜单，并在再次单击或单击页面外部某处时关闭。

但是，如果我单击第一个按钮并且没有再次单击相同的按钮或没有单击页面上的其他位置，如果我单击第二个按钮，则第二个菜单将在第一个菜单打开时打开，并且如果我对之后的第三个菜单第三个菜单也将在前两个菜单打开时打开。所以你会看到所有三个菜单同时打开。

这就是问题所在。我想在单击下一个菜单按钮时关闭所有上一个菜单，或者在单击上一个菜单按钮时关闭所有下一个菜单。关键是一次不应该有多个菜单可见。

我只想打开最后一个，单击下一个时应该关闭上一个，这样您一次看不到多个下拉菜单。

而且我不想在 html 文件上添加任何 id 名称，因为我需要多次复制粘贴此 html 代码，因此您应该只通过使用相同类名来识别元素的 javascript 给我一个解决方案无论我复制多少次 html 代码，菜单的工作方式都是一样的，并且一次不会打开一个以上的菜单。

请用纯 javascript 显示。


<!DOCTYPE html>
<html lang='en-US'>

<head>

  <title>au2p10</title>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>

  <style>

    * {
      margin: 0px;
      padding: 0px;
      font-family:'Segoe UI', sans-serif;
    }

    a {
      text-decoration: none;
    }

    .res-loc-shre-con {
      display: flex;
      justify-content: flex-end;
      padding: 30px;
    }

    .edit-menu-icon-con {
      position: relative;
      margin: 10px 0px 70px 0px;
    }

    .edit-menu-text-icon-con {
      display: flex;
      align-items: center;
    }

    .edit-menu-sdtext {
      font-size: 14px;
      color: #0086bf;
      padding: 0px 8px 0px 0px;
    }

    .edit-menu-icon-image {
      width: 25px;
      height: 20px;
      padding: 4px 4px 4px 4px;
    }

    .eidit-menu-icon-item-con {
      position: absolute;
      z-index: 2;
      top: 35px;
      right: 0px;
      background-color: white;
      border: 0.9px solid #dadada;
      padding: 4px 0px 4px 0px;
      width: 200px;
      min-height: 100px;
    }


    .edit-menu-drop-down-box {
      position: absolute;
      z-index: 2;
      top: 42px;
      right: -1px;
      width: 180px;
      padding: 3px 0px 3px 0px;
      background-color: white;
      border: 0.9px solid rgb(219, 219, 219);
      display: none;
    }

    .edit-menu-drop-down-box:focus {
      outline: 0px;
    }

    .show-edit-menu-drop-down-box {
      display: block;
    }

    .edit-menu-drop-down-cone-box {
      position: relative;
    }

    .edit-menu-dorp-down-cone {
      position: absolute;
      z-index: -1;
      top: -11px;
      right: 9px;
      width: 14px;
      height: 14px;
      background-color: rgb(255, 255, 255);
      border-left: 0.9px solid rgb(189, 189, 189);
      border-top: 0.9px solid rgb(189, 189, 189);
      transform: rotate(45deg);
    }

    .edit-menu-selectitem {
      display: flex;
      padding: 5px 10px 5px 10px;
    }

    .edit-menu-selectitem:hover {
      background-color:  rgb(238, 238, 238);
    }

    .edit-menu-select-text {
      font-size: 15px;
      color: #7c7c7c;
      padding: 3px 5px 3px 5px;
    }

  </style>

</head>

<!-- start -->
<body>

<div class='res-loc-shre-con'>
  <div class='edit-menu-icon-con'>
    <div class='edit-menu-text-icon-con'>
      <p class='edit-menu-sdtext'>Manage au2</p>
      <img class='edit-menu-icon-image' src='menu-icon-blue.svg' alt=''>
    </div>
    <div class='edit-menu-drop-down-box'>
      <div class='edit-menu-drop-down-cone-box'>
        <div class='edit-menu-dorp-down-cone'></div>
      </div>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Edit</p>
        </div>
      </a>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Make Featured</p>
        </div>
      </a>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Comment</p>
        </div>
      </a>
    </div>
  </div>
</div>

<div class='res-loc-shre-con'>
  <div class='edit-menu-icon-con'>
    <div class='edit-menu-text-icon-con'>
      <p class='edit-menu-sdtext'>Manage au2</p>
      <img class='edit-menu-icon-image' src='menu-icon-blue.svg' alt=''>
    </div>
    <div class='edit-menu-drop-down-box'>
      <div class='edit-menu-drop-down-cone-box'>
        <div class='edit-menu-dorp-down-cone'></div>
      </div>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Edit</p>
        </div>
      </a>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Make Featured</p>
        </div>
      </a>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Comment</p>
        </div>
      </a>
    </div>
  </div>
</div>

<div class='res-loc-shre-con'>
  <div class='edit-menu-icon-con'>
    <div class='edit-menu-text-icon-con'>
      <p class='edit-menu-sdtext'>Manage au2</p>
      <img class='edit-menu-icon-image' src='menu-icon-blue.svg' alt=''>
    </div>
    <div class='edit-menu-drop-down-box'>
      <div class='edit-menu-drop-down-cone-box'>
        <div class='edit-menu-dorp-down-cone'></div>
      </div>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Edit</p>
        </div>
      </a>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Make Featured</p>
        </div>
      </a>
      <a class='edit-menu-itemlink' href=''>
        <div class='edit-menu-selectitem'>
          <p class='edit-menu-select-text'>Comment</p>
        </div>
      </a>
    </div>
  </div>
</div>

<script>

  var edit_menu_btns = document.querySelectorAll('.edit-menu-icon-image');
  edit_menu_btns.forEach(btn => {
    btn.addEventListener('click', show_edit_menu_dropdown_box);
  });

  function show_edit_menu_dropdown_box(e) {
    var card = e.target.closest('.edit-menu-icon-con');
    var edit_menu_dropdown_box = card.querySelector('.edit-menu-drop-down-box');
    edit_menu_dropdown_box.classList.toggle('show-edit-menu-drop-down-box');

    window.addEventListener('click', function(event) {
      if (!event.target.matches('.edit-menu-icon-image')) {
        var editMenuDropdowns = document.getElementsByClassName('edit-menu-drop-down-box');
        for (var j = 0; j < editMenuDropdowns.length; j++) {
          var openEditMenuDropdown = editMenuDropdowns[j];
          if (openEditMenuDropdown.classList.contains('show-edit-menu-drop-down-box')) {
            openEditMenuDropdown.classList.remove('show-edit-menu-drop-down-box');
          }
        }
      }
    });
  }

</script>

</body>

我已将它放在一个 html 文件 (https://ibnul.neocities.org/_temporary/au2p10/au2p10.html) 中，因此您可以轻松下载该页面并在您的代码编辑器上试用。如果您不理解我的问题的任何部分，请发表评论。

【问题讨论】：

标签： javascript html css

【解决方案1】：

用这个替换事件监听器：

window.addEventListener('click', function(event) {
    var editMenuDropdowns = document.getElementsByClassName('edit-menu-drop-down-box');
    for (var j = 0; j < editMenuDropdowns.length; j++) {
      var openEditMenuDropdown = editMenuDropdowns[j];
      if (openEditMenuDropdown.classList.contains('show-edit-menu-drop-down-box') && event.target.closest('.edit-menu-icon-con') !== openEditMenuDropdown.parentElement) {
        openEditMenuDropdown.classList.remove('show-edit-menu-drop-down-box');
      }
    }
});

我们在这里所做的只是告诉“editMenuDropdowns”循环在单击时不要关闭最近的菜单，但它会关闭所有其他菜单。

Dennis 是正确的，因为 eventlistener 函数应该在它上面的函数内部，而它应该是独立的。

【讨论】：

感谢您的回答。这正是我想要的。一个独立的脚本，将处理所有的菜单。
很高兴为您提供帮助！我曾经用下拉菜单 INSIDE 下拉菜单解决了同样的问题，所以我知道关闭优先级有多少令人头疼。

【解决方案2】：

创建一个关闭所有菜单的函数，并在每次单击任何菜单时调用它（您已经编写了该部分）。然后打开菜单。

function closeAllMenus() {
    var editMenuDropdowns = document.getElementsByClassName('edit-menu-drop-down-box');
    for (var j = 0; j < editMenuDropdowns.length; j++) {
      var openEditMenuDropdown = editMenuDropdowns[j];
      if (openEditMenuDropdown.classList.contains('show-edit-menu-drop-down-box')) {
        openEditMenuDropdown.classList.remove('show-edit-menu-drop-down-box');
      }
   }
}

另外，我相信您在 show_edit_menu_dropdown_box 函数的末尾缺少一个花括号。

【讨论】：

知道你的想法，但我自己做不到，我是 javascript 的初学者。

【解决方案3】：

您必须先关闭所有菜单才能打开菜单。

所以请在您的代码中添加几行，如下所示：

function show_edit_menu_dropdown_box(e) {
// Add blow lines
var cards = document.querySelectorAll(".edit-menu-drop-down-box");
 cards.forEach(item => {
      item.classList.remove("show-edit-menu-drop-down-box");
});

var card = e.target.closest('.edit-menu-icon-con');
var edit_menu_dropdown_box = card.querySelector('.edit-menu-drop-down-box');
edit_menu_dropdown_box.classList.toggle('show-edit-menu-drop-down-box');

window.addEventListener('click', function(event) {
  if (!event.target.matches('.edit-menu-icon-image')) {
    var editMenuDropdowns = document.getElementsByClassName('edit-menu-drop-down-box');
    for (var j = 0; j < editMenuDropdowns.length; j++) {
      var openEditMenuDropdown = editMenuDropdowns[j];
      if (openEditMenuDropdown.classList.contains('show-edit-menu-drop-down-box')) {
        openEditMenuDropdown.classList.remove('show-edit-menu-drop-down-box');
      }
    }
  }
});

}

【讨论】：

感谢您的回答。我已经检查过了，它工作正常。