JQuery: обнаружить, когда мышь оставляет несколько элементов

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

Вопрос

У меня есть меню, сделанное из DOV, и у одного из DOV есть функция jQuery MouseEnter, которая скользит вниз по выпадению:

$(".dropdownLauncher").mouseenter(function() {
  $(".dropdown").slideDown("slow");
});

У меня также есть функция, которая сдвигает раскрывающуюся спину обратной части мыши, оставляет выпадающую сторону:

$(".dropdown").mouseleave(function() {
  $(".dropdown").slideUp("slow");
});

Это было бы хорошо, за исключением того, что, когда пользователь перемещает мышь через пусковую установку, чем снова, не проходя через выпадающие части, меню остается внизу.

Можно ли проверить, находится ли мышь в любом из DOV?

РЕДАКТИРОВАТЬ 1: Markup:

<div class="menu">
                <div class="menuItem selectedItem">Home</div>
                <div class="menuItem unselectedItem leftBorder dropdownLauncher">About <img src="Arrow.gif"></div>
                <div class="dropdown">
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                    <div class="menuItem unselectedItem dropdownItem topBorder">Beep</div>
                </div>
                <div class="menuItem unselectedItem leftBorder">Visiting</div>
                <div class="menuItem unselectedItem leftBorder">Newsletters</div>
                <div class="menuItem unselectedItem leftBorder">Ecology</div>
            </div>
Это было полезно?

Решение

Что ж, этот способ довольно глюка ... Откройте любое меню (например, меню браузера) и перемещать мышь - оно не скрыто. Это нормальный путь. Когда вы нажимаете где -то, меню скрыто (чтобы вы могли прикрепить обработчик событий к документированию). Даже когда вы отправляетесь в подменю, это отображается, когда мышь за ней и скрыта, когда вы перемещаете мышь к другому пункту меню; Но когда вы выводите мышь из меню, подменю не скрыт.

Если вы все еще хотите реализовать свою идею, вам нужно будет реализовать сложную систему для управления действиями пользователей. Добавьте обработчик MouseLeave в DropdownLauncher, зарегистрируйте, что пользователь оставил этот элемент и скрывается выпадающее меню. Теперь в функции, которая скрывает выпадающую меню, проверьте ли мышь в раскрывающемся меню - отменить скрытие; в противном случае скрыть это. Не забудьте почистить состояние этой переменной («Левый распадчик»). Например, вы можете выполнить раскрывающееся меню, скрывающееся через 1 секунду после того, как пользователь оставил запуск.

Также будьте осторожны, когда пользователь перемещает мышь довольно быстро (просто придурок), у браузера нет времени, чтобы вызвать некоторые события (у меня были проблемы с MouseMove) ... убедитесь, что вы проверяете этот случай.

Ну, кода не прилагается, но я надеюсь, что вы получите идею.

ОБНОВИТЬ: Наверное, вас больше не интересуют этот вопрос (ответ приходит так поздно, так что я понимаю;), но я нашел очень интересное решение, простое в поддержке:

Нажмите на страницу «Примеры»

Откройте эту страницу, есть меню. Как я понял, это то, что вы хотите реализовать (я имею в виду то же поведение навигации по меню). Посмотрев на код JavaScript, я заметил, что он очень маленький, и даже более, это не связано с этим меню ... так что мне было ясно, они используют чистый HTML+CSS для его выполнения. Просто посмотрите на маленький CSS -файл, а также взгляните и меню HTML Markup:

<div id="rootMenu" class="menustyle">
  <ul class="menubar">
      <li class="topitem">
        <a class="selected" href="_link_"><img border="0" src="/click-examples/assets/images/home.png" alt=" Home" class="link"> Home</a>
        <ul class="submenu">
           <li>
              <a title="BorderPage Java source" target="_blank" href="_link_">BorderPage Class</a>
           </li>
           <li>
              <a title="Page border HTML template" target="_blank" href="_link_">Border Template HTML</a>
            </li>
            ....
        </ul>
      </li>
      ....
   </ul>
   ....
</div>

Все остальное делается CSS (в частности: пари псевдо-класса). Мне понравился этот подход. Итак, теперь у вас есть альтернатива, по крайней мере;)

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