0

Summary/The Problem:

After hovering over a link in a menu system that uses jQuery and hoverIntent to display a submenu, if the mouse pointer moves into the submenu, the submenu immediately closes.

Example on JSfiddle

Details

I've been having a problem with the jQuery hoverIntent plugin. I have a navigation menu that includes a submenu. That submenu is opened when the user hovers over a specified top-level link. Here is the 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>

Basically, each <li> within the <ul> with id "Menu" has a link to a page on the website, and one of the <li>'s contains a submenu (another <ul>) with more links. That <li> with the submenu in it is given the class "hassublinks", and still has an <a> tag in it to link to the main Software & Apps page. But because it contains a submenu, I also used jQuery and hoverIntent to make it so that when you hover over the Software & Apps <li>, the submenu <ul> is displayed. Here is the code:

$(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
    });
});

This code simply makes it so that when the <a> tag in a top-level <li> that has sublinks is hovered over, the submenu will be displayed, and then disappear when the mouse pointer leaves. This works, however there is one major issue: After the initial <li> is hovered over to display the submenu, if the mouse pointer moves onto that submenu or an <li> in the submenu, the submenu is hidden. Obviously, this is not supposed to happen. I have created a demo of this on jsfiddle. Is there any way to fix this? I had previously been using CSS3 transitions for the submenu, but switched to jQuery when I realized that you cannot easily transition the height of an element from 0px (its closed height) to the value "auto" (its open height). Now with jQuery I can easily transition the submenu to its full height, so that's no longer a problem, but now there's this issue, and I can't figure out how to fix it. Is there any way to make the submenu stay open when it's hovered over?

I have searched for similar questions and did find a few, but after reading them I saw that they involved <div's> and not <ul>'s, <li>'s, and <a>'s, and when I tested the answers to those questions by changing them to use those tags, they didn't work correctly.

4

1 回答 1

4

尝试这个

$(function($) {

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

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

});
于 2013-01-11T18:53:24.950 回答