Переопределить JS, выйдя из div?

Обновлено: Я только что узнал, что вы хотите скрыть список при выходе мыши, который @RoryMcCrossan уже показал правильно. Я только что показал, как переключать список с помощью той же кнопки. В любом случае я сохраню этот ответ, поскольку он может дать вам некоторые идеи.

Есть много способов справиться с такой проблемой. Но всем им нужно заявление 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>

Чтобы сделать то, что вам нужно, вы можете подключить к документу событие mousemove. В этом обработчике событий вы можете запросить event.target, чтобы узнать, является ли это триггером кнопки или списком поиска, если нет, то скрыть содержимое.

Обратите внимание на использование addEventListener() в JS вместо атрибутов onX в HTML. Последнее является плохой практикой, и его следует избегать, где это возможно. Кроме того, обратите внимание, что я переместил стили CSS в таблицу стилей. Не добавляйте CSS в свой HTML.

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

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

При этом можно было бы добиться желаемого эффекта гораздо проще, используя только CSS, предполагая, что появление списка при наведении мыши на кнопку триггера соответствует вашим требованиям:

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

#search-list:hover,
#trigger:hover + #search-list {
  display: block;
}

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

Гораздо лучше не использовать встроенные стили или скрипты, так как большинство типичных content-security-policy забанят и то, и другое из-за небезопасности. Вам следует создавать стили в таблице стилей и кодировать в файле JS.

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

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

  .hide {
    display:none;
  }

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

  <div id = "search-list" class = "hide">
    search-list
  </div>
  <script>
    document.querySelector("#search-list").addEventListener("mouseout", (e) => 
      {
         e.target.classList.add("hide");
      });
  </script>