jQuery $ .hover, используемый для подменю, вызывающий & # 8220; подпрыгивание & # 8221;

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

  •  08-07-2019
  •  | 
  •  

Вопрос

У меня возникли проблемы с методом наведения jQuery.

Вот соответствующий код JavaScript: 

$("#navigation > li > ul").hide();
$("#navigation > li").hover(
    function() {
        $(this).children("ul").slideDown(125);
    },
    function() {
        $(this).children("ul").slideUp(125);
    }
);

Вот соответствующий HTML-код: 

<ul id="navigation">
    <li><a href="#">Top Level Item #1</a></li>
    <li>
        <a href="#">Top Level Item #2</a>
        <ul>
            <li><a href="#">Sub-Menu Item #2-1</a></li>
            <li><a href="#">Sub-Menu Item #2-2</a></li>
            <li><a href="#">Sub-Menu Item #2-3</a></li>
        </ul>
    </li>
</ul>

Всякий раз, когда вы наводите курсор мыши на элемент верхнего уровня, подменю в нем (если оно есть) будет выпадать с приятным, быстрым эффектом скольжения. Проблема заключается в том, что при наведении указателя мыши на "quot;" меню быстро и удерживайте курсор мыши там, где должно быть меню , но оно еще не дошло: затем меню нажмет " конец " анимации при наведении курсора мыши и возвращайтесь обратно в скрытое состояние, и повторяйте, пока не уберете мышь из раскрывающегося меню.

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

Решение

Может быть, добавление проверки в функцию mouseout может помочь: 

if( !$(this).children("ul").is(":animated") ){
  $(this).children("ul").slideUp(125);
}

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

Вы можете попробовать использовать hoventIntent, плагин jQuery, который помогает определить намерение пользователя навести курсор на элементы.

http://cherne.net/brian/resources/jquery.hoverIntent.html

Я изменил твой пример с ним, и он, кажется, ведет себя намного лучше. Я добавил: 

<script type="text/javascript" language="JavaScript" src="jquery.hoverIntent.minified.js"></script>

и изменил одну строку с помощью hover () на: 

$("#navigation > li").hoverIntent(

Я не смог заставить его отскочить, и это было больше похоже на всплывающее меню с примененным поведением hoverIntent.

Наконец, вы можете попробовать использовать один из готовых плагинов меню jQuery, поскольку они уже проделали всю эту тяжелую работу за вас:)

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