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

标签 javascript html css

请先看页面了解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 ) 中，因此您可以轻松下载该页面并在您的代码编辑器上试用。 如果您不理解我的问题的任何部分，请发表评论。

最佳答案

用这个替换事件监听器:

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 函数在它上面的函数中，而它应该是独立的。

关于javascript - 单击下一个下拉菜单打开器按钮时关闭上一个下拉菜单并保持该菜单打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59727021/

上一篇：css - 如何在列表元素中居中文本

下一篇：html - 如何在仅使用 CSS 的 HTML 中的每个标题后添加一条水平线

相关文章：

php - 跨域 AJAX 不工作 PHP

javascript - 变量中的 Jquery AJAX 响应 JSON。

html - 如何在 W3.CSS 中将两张卡片并排放置

javascript - 类内的 CSS id

javascript - 如何使用 Stripe Payment Intents 提供账单详细信息以确保 SCA 合规性？

javascript - 使用 wikipedia api contentmodel 返回未知的 mustache 大括号

javascript - 样式标签中的 CSS 未显示在元素中？

iphone - 您能否向移动设备提供 HTML 输入字段仅为数字的提示？

html - 以 Angular 2 突出显示搜索文本

css - 如何使用 ReactJS 设置 Material UI 的 ComboBox 自动完成的高度

©2024 IT工具网  联系我们