Question

我正在使用此脚本打开一个下拉菜单，然后在点击触发器时除外。现在我正在尝试将第二个下拉列表添加到页面上的另一个区域并重复该脚本，但它正在破坏。

例如，我点击按钮A（Gravatar），然后下拉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，例如。

＆＃13;

// 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();
}

＆＃13;

/* style span like link */
.linkLike {
  text-decoration: underline;
  cursor: pointer;
}

/* class to hide element */
.hidden {
  visibility: hidden;
}

＆＃13;

<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>

＆＃13;

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

打开一个下拉列表，使用JavaScript关闭另一个下拉列表

1 个答案: