单击下一个下拉菜单打开器按钮时，关闭上一个下拉菜单，并使该菜单保持打开状态

时间：2020-01-14 03:09:53

标签： javascript html css

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

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

因此，我已经成功单击菜单中的相应按钮来打开菜单，并且再次单击或在页面上的某个地方单击时也关闭了菜单。

但是，如果我单击第一个按钮，而又没有再次单击同一按钮，或者单击了第二个按钮，则没有单击页面上的其他位置，则在打开第一个菜单的同时打开第二个菜单，并且如果我也这样做第三个菜单之后的第三个菜单也将同时打开前两个菜单的同时打开。因此，您将看到同时打开所有三个菜单。

这是问题所在。我想在单击下一个菜单按钮时关闭所有上一个菜单，或者在单击上一个菜单按钮时关闭所有下一个菜单。关键是一次最多只能看到一个菜单。

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

而且我也不想在html文件上添加任何id名称，因为我需要多次复制粘贴此html代码，因此您应该仅通过javascript提供解决方案，该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）中，因此您可以轻松下载页面并尝试使用代码编辑器。 如果您不了解我的问题的任何部分，请发表评论。

3 个答案:

答案 0 :(得分：1)

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

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函数末尾缺少大括号。

答案 1 :(得分：1)

将事件监听器替换为：

Picker_Unfocused

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

丹尼斯（Dennis）是对的，因为事件监听器功能应该独立存在于其上方的函数中。

答案 2 :(得分：1)

打开一个菜单之前，您必须先关闭所有菜单。

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

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');
      }
    }
  }
});

}

相关问题
最新问题