JavaScript анимированное выпадающее меню - PullRequest
Новая
       3

JavaScript анимированное выпадающее меню

1 голос
/ 21 декабря 2009

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

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

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

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

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

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

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

Ответы [ 2 ]

2 голосов
/ 21 декабря 2009

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

0 голосов
/ 21 декабря 2009

Поскольку события наведения мыши от дочерних элементов всплывают / распространяются к родителям, я бы использовал таймер, который отменяется в событии 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 мс.

...