javascript - 使用 JavaScript 打开一个下拉菜单，关闭另一个下拉菜单

Question

我使用此脚本打开一个下拉菜单，然后在单击除触发器之外的其他任何内容时将其关闭。现在我尝试将第二个下拉列表添加到页面上的另一个区域并重复该脚本，但它正在中断。

例如，我单击按钮 A(头像)，然后打开下拉菜单 A。

但是，当我添加第二个脚本并单击按钮 B(类别)打开下拉菜单 B 时，下拉菜单 A 保持打开状态。

同时添加第二个脚本会破坏第一个脚本的下拉关闭功能。

这是脚本:

<script>
  function openAccount(event) {
    event.stopPropagation();
    document.getElementById("gravatar").classList.toggle("open");
  }
  window.onclick = function(event) {
    document.getElementById("gravatar").classList.remove("open");
  }
</script>
<script>
  function openCategory(event) {
    event.stopPropagation();
    document.getElementById("category").classList.toggle("open");
  }
  window.onclick = function(event) {
    document.getElementById("gravatar").classList.remove("open");
  }
</script>

<li class="gravatar">
  <a href="#" class="dropbtn" onclick="openAccount(event)">
    <img src="<?php echo $gravatar; ?>" alt="" />
    <span class="fa fa-icon fa-caret-down"></span>
    </a>
  <ul class="dropdown" id="gravatar">
    <li class="header">
      <?php echo $user['email']; ?>
    </li>
  </ul>
</li>

<div class="category">
  <a href="#" class="dropbtn" onclick="openCategory(event)">Properties<span class="fa fa-icon fa-caret-down"></span></a>
  <div id="category">Test</div>
</div>

目标:

• 页面不同部分有多个下拉菜单。
• 点击后打开下拉菜单。
• 点击页面上的其他任意位置即可关闭下拉菜单。
• 单击后还会关闭之前打开的所有菜单。

Answer 1

我会做一些非常简单的事情，例如在单击的元素上放置一个 data* 属性，其中包含要显示或隐藏的元素的 ID，例如

// Toggle hidden class on/off
function toggleVis(event) {
  // Stop click on element bubbling (to body)
  event.stopPropagation();
  // Get target element
  var el = document.getElementById(this.dataset.id);
  // If non-target elements are visible, hide them
  hideAll(el);
  // Toggle target
  el.classList.toggle('hidden');
}
// Hide all, excluding passed element
function hideAll(el) {
  Array.from(document.querySelectorAll('ul:not(.hidden)')).forEach(function(node){
    if (el != node) node.classList.add('hidden');
  });
}

// Attach listeners
window.onload = function() {
  // Add to linkLike spans
  Array.from(document.querySelectorAll('.linkLike')).forEach(function(node) {
    node.addEventListener('click', toggleVis, false);
  });
  // Add hideAll listener to wndow
  window.addEventListener('click', hideAll, false);
  // Run hideAll
  hideAll();
}

/* style span like link */
.linkLike {
  text-decoration: underline;
  cursor: pointer;
}

/* class to hide element */
.hidden {
  visibility: hidden;
}

<ul id="a"><li>A</ul>
<ul id="b"><li>B</ul>
<ul id="c"><li>C</ul>
<ul id="d"><li>D</ul>

<div><span class="linkLike" data-id="a">Toggle A</span></div>
<div><span class="linkLike" data-id="b">Toggle B</span></div>
<div><span class="linkLike" data-id="c">Toggle C</span></div>
<div><span class="linkLike" data-id="d">Toggle D</span></div>

当然还有其他方法可以进行关联，但 ID 简单、明确并且不依赖于文档布局或格式。