Раскрывающееся меню с анимацией JavaScript

StackOverflow https://stackoverflow.com/questions/1937059

  •  20-09-2019
  •  | 
  •  

Вопрос

Я пытаюсь создать выпадающее меню, действующее как подменю главного меню.Подменю - это просто элемент div, содержащий элементы / ссылки.При нажатии на пункт главного меню подменю выпадает вниз и остается там.Это все просто, но я хочу, чтобы подменю перемещалось обратно вверх, если курсор покинет подменю.Другими словами, простое событие наведения курсора мыши.Однако, похоже, что когда курсор вводит один из пунктов внутри подменю, срабатывает событие 'mouseout'.Это то, что вы бы сделали, за исключением того, что, если вы подумаете об этом, курсор покидает элемент подменю, даже если он не покидает его границ.Однако это создает проблему, потому что я хочу, чтобы событие срабатывало только в том случае, если курсор перемещается за пределы элемента подменю.

К чему это на самом деле сводится, так это к тому, что один div находится внутри другого div, вот так:

----------------------------
|          DIV-1           |
|                          |
|      -------------       |
|      |           |       |
|      |   DIV-2   |       |   AREA OUTSIDE DIV-1
|      |           |       |
|      |           |       |
|      |           |       |
|      -------------       |
|                          |
|                          |
----------------------------

Теперь две вещи могут привести к тому, что DIV-1 вызовет событие 'mouseout':

  1. Курсор перемещается из области границ DIV-1 в область за пределами этих границ
  2. Курсор перемещается из пределов DIV-1 в область DIV-2

Моя цель состоит в том, чтобы уметь отличать эти два события друг от друга, но я не смог понять, как это сделать.

У кого-нибудь есть хорошее решение этой проблемы?Это кажется достаточно распространенной функцией, так что кто-то, должно быть, решил ее.

Это было полезно?

Решение

Поскольку события наведения курсора мыши из дочерних элементов всплывают / распространяются на родительские элементы, я бы использовал таймер, который отменяется в событии onmouseover div подменю, если бы я шел по небиблиотечному маршруту:

var hideMenuTimer;
subMenuDiv.onmouseover = function () {
    window.clearTimeout(hideMenuTimer);
}
subMenuDiv.onmouseout = function (evt) {
    evt = evt || window.event;
    if ((evt.target || evt.srcElement).id == "subMenuDiv")
        hideMenuTimer = window.setTimeout(function () {
            subMenuDiv.style.display = "none";
        }, 300);
}

Очень простой пример, но он должен сработать, если все подэлементы подменю div правильно отображают событие onmouseover в элементе subMenuDiv, после чего таймер отменяется перед проведением опроса.Кроме того, я установил тайм-аут в 300 мс, потому что я думаю, что лучше всего иметь такого рода вещи, чтобы при случайном наведении курсора мыши у вас было короткое окно, чтобы вернуть мышь обратно, прежде чем она скроется.Если вы хотите, чтобы он скрывался мгновенно, установка его на 0 мс тоже должна работать нормально.

Другие советы

http://users.tpg.com.au/j_birch/plugins/superfish/ <-- сэкономь себе время, он уже вырвал свои волосы для тебя (хотя, может быть, не в буквальном смысле, не знаю)

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top