hoverIntent Подменю JQuery не остается открытым

Question

Резюме / Проблема:

При наведении указателя мыши на ссылку в системе меню, которая использует jQuery и hoverIntent для отображения подменю, если указатель мыши перемещается в подменю, подменю немедленно закрывается.

Пример на JSfiddle

подробности

У меня возникла проблема с плагином jQuery hoverIntent. У меня есть меню навигации, которое включает в себя подменю. Это подменю открывается, когда пользователь наводит указатель мыши на указанную ссылку верхнего уровня. Вот HTML-код:

<ul id="Menu">
    <li><a href="/">Home</a></li>
    <li><a href="news/">News</a></li>
        <li class="hassublinks"><a href="software.php">Software & Apps</a>
            <ul>
                <li><a href="windows.php">Windows</a></li>
                <li><a href="mac.php">Mac</a></li>
                <li><a href="ios.php">iOS</a></li>
                <li><a href="android.php">Android</a></li>
            </ul>
        </li>
    <li><a href="feedback.php">Feedback</a></li>
    <li><a href="about.php">About</a></li>
</ul>

В основном каждый <li> в пределах <ul> с идентификатором "Меню" имеет ссылку на страницу на сайте, и один из <li>'s содержит подменю (другое <ul>) с большим количеством ссылок. Тот <li> с подменю в нем дан класс "hassublinks", и по-прежнему имеет <a> Отметьте в нем ссылку на главную страницу программного обеспечения и приложений. Но так как оно содержит подменю, я также использовал jQuery и hoverIntent, чтобы сделать так, чтобы при наведении курсора на Software & Apps <li>, подменю <ul> отображается. Вот код:

$(function($) {

    function showMenu(){ 
        $('#Menu ul').slideDown(500, "swing");
    }
    function hideMenu(){ 
        $('#Menu ul').slideUp(500, "swing");
    } 

    $('#Menu > li.hassublinks > a').hoverIntent({
        over: showMenu,
        timeout: 400,
        out: hideMenu
    });
});

Этот код просто делает так, чтобы когда <a> тег на верхнем уровне <li> с подлинками наведено, подменю будет отображаться, а затем исчезнет, ​​когда указатель мыши уйдет. Это работает, однако есть одна важная проблема: после первоначального <li> отображается подменю, если указатель мыши перемещается в это подменю или <li> в подменю скрыто подменю. Очевидно, это не должно происходить. Я создал демо-версию этого на jsfiddle. Есть ли способ это исправить? Ранее я использовал переходы CSS3 для подменю, но переключился на jQuery, когда понял, что нельзя легко перевести высоту элемента с 0px (его закрытая высота) на значение "auto" (его открытая высота). Теперь с помощью jQuery я могу легко переместить подменю на полную высоту, так что это больше не проблема, но теперь есть эта проблема, и я не могу понять, как ее исправить. Есть ли способ заставить подменю оставаться открытым, когда оно зависло над ним?

Я искал похожие вопросы и нашел несколько, но прочитав их, я увидел, что они связаны <div's> и не <ul>'s, <li>'s, а также <a>'sи когда я проверил ответы на эти вопросы, изменив их на использование этих тегов, они не работали правильно.

Answer 1

Попробуй это

$(function($) {

 function showMenu() {
    $('#Menu ul').slideDown(500, "swing");
}

function hideMenu() {
    $('#Menu ul').slideUp(500, "swing");
}   
    $("li.hassublinks").hoverIntent({
        over: showMenu,
        timeout: 400,
        out: hideMenu
    });

});