通过将鼠标悬停在 div 之外来覆盖 JS？

Question

如何将其更改为当我将指针悬停在按钮和搜索列表 div 外部时搜索列表消失的位置？事实上，当鼠标悬停在 div 或按钮之外时，搜索列表无法隐藏。

我意识到我可能需要更改 JavaScript 代码，但我无法理解如何做到这一点。谢谢。

  function ListToggle() {
    var L = document.getElementById("search-list");
    L.style.display = "block";  // <-- Set it to block
  }

  #search-list {
    width: 150px;
    height: 150px;
    background-color: aquamarine;
  }

  <button onclick="ListToggle()">Tests</button>

  <div id="search-list" style="display:none">
    search-list
  </div>

Answer 1

处理这样的事情有很多方法。但他们都需要

if

声明。我将向您展示 3 个例子。

1.使用

style

属性检查当前样式：

您可以轻松检查元素当前的样式，并告诉 JS 如果是

block

将其设置为

none

，反之亦然：

function ListToggle() {
  // let's use a better name
  var searchList = document.getElementById("search-list");

  if(searchList.style.display === "block") {
     searchList.style.display = "none";
  } else {
     searchList.style.display = "black";
  }
 
  // or a simpler way:
  searchList.style.display = searchList.style.display === "block" ? "none" : "block";
}

2.外部变量

您可以在函数外部定义一个变量，并将其设置为

true

或

false

来描述

searchList

的状态。

var isOpened = false;

function ListToggle() {
  isOpened = !isOpened;  
  var searchList = document.getElementById("search-list");

  if(isOpened) {
     searchList.style.display = "block";
  } else {
     searchList.style.display = "none";
  }
}

3.数据集（CSS、JS 和 HTML 的混合）

如果您打算拥有许多具有相同功能的元素。您可以使用这种方法来完成。在这里，我们可以为我们的元素设置一个数据集，并使用 CSS 根据它切换样式。 （在 Mozilla 文档中阅读有关数据集的更多信息）我将向您展示如何操作：

function ListToggle() {
  var searchList = document.getElementById("search-list");

  if(searchList.dataset.isOpened === "1") {
     searchList.dataset.isOpened = "0";
  } else {
     searchList.dataset.isOpened = "1";
  }
}

#search-list {
  display: none;
}

#search-list[data-is-opened="1"] {
  display: block;
}

您还可以使用 HTML 设置默认状态（本例中可选）：

<div id="search-list" data-is-opened="0">
  search-list
</div>

Answer 2

要执行您需要的操作，您可以将

mousemove

事件挂钩到文档。在该事件处理程序中，您可以询问

event.target

以查看它是否是按钮触发器或搜索列表，如果不是，则隐藏内容：

const button = document.querySelector('#trigger');
const searchList = document.querySelector('#search-list');

button.addEventListener('click', () => {
  searchList.style.display = "block";
});

const updateListState = e => {
  const targetId = e.target.id;
  if (targetId !== 'trigger' && targetId !== 'search-list') {
    searchList.style.display = "none";
  }
}
document.addEventListener('mousemove', updateListState);

#search-list {
  width: 150px;
  height: 150px;
  background-color: aquamarine;
  display: none;
}

<div id="container">
  <button id="trigger">Tests</button>
  <div id="search-list">
    search-list
  </div>
</div>