jQuery - slideUp / slideDown not working on ul?

Question

I have the following code in my masterpage:

jQuery:

$(window).load(function () {
    $("li.submenu").hover(
        function () { $(this).find("ul").slideDown("slow"); },
        function () { $(this).find("ul").slideUp("slow"); }
    );
});

HTML:

<ul class="menu" runat="server" id="Menu">
    <li class="first" runat="server"><asp:HyperLink runat="server" NavigateUrl="/index.aspx">Home</asp:HyperLink></li>
    <li class="submenu" runat="server">
        <asp:HyperLink runat="server" NavigateUrl="/categories/index.aspx">Products</asp:HyperLink>
        <ul runat="server">
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category1.aspx">Dogs</asp:HyperLink></li>
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category2.aspx">Category 2</asp:HyperLink></li>
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category3.aspx">Category 3</asp:HyperLink></li>
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category4.aspx">Category 4</asp:HyperLink></li>
            <li runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category5.aspx">Category 5</asp:HyperLink></li>
            <li class="last" runat="server"><asp:HyperLink runat="server" NavigateUrl="/categories/category6.aspx">Category 6</asp:HyperLink></li>
         </ul>
    </li>
    <li class="last" runat="server"><asp:HyperLink runat="server" NavigateUrl="/contact.aspx">Contact Us</asp:HyperLink></li>
</ul>

If I changed this to toggle("slide") it slides in from one side and then exits on the same side when the mouse enters and leaves the li.submenu. This means that the elements exist for definite, and there are no typos. However the slideDown and slideUp functions do not seem to be functioning (unless slow means ultra fast...).

The files I am including for jQuery and jQuery UI are jquery-1.4.2.js and jquery-ui-1.7.2.custom.min.js. This is enough, isn't it?

I have CSS to specify that the submenu is displayed or hidden instantly (display: block; / display: none;) in case the user does not have JS. Is there any chance that this is causing the problem? Should I alter the class of the submenu using JS so that the CSS cannot act on it if JS is enabled? Or is there some other problem which is not caused by the CSS?

Answer 1

EDIT

This solution does not actually work, now that I have tested it. I need the submenu to stay visible when the mouse moves out of the link. In this case it doesn't. Back to the drawing board..

It actually turns out that my original solution does work, but only if I put

$("ul li.submenu ul").toggle(0);

before it (this sets the menus to the opposite and back to their original state without the user even realising). Strange, but I can live with that.

---

ORIGINAL ANSWER

Well after a while, and quite a long time gazing at the code wondering what the hell was wrong with it, it occurred to me that the link directly within the li.submenu was set to display: block, with width and height set to 100%. It was actually this which needed changing, resulting in the jQuery looking like the following:

$(document).ready(function () {
    $("li.submenu > a").hover(
        function () { $(this).closest("li.submenu").find("ul").slideDown("slow"); },
        function () { $(this).closest("li.submenu").find("ul").slideUp("slow"); }
    );
});

This is it... problem solved. However it seems to take a second or two to pick up the slide instructions. This simply means that if anyone hovers over the li.submenu within a second or two of the page loading then it will display the menu instantly rather than sliding - I think that is a non-issue though.

Hope this helps someone out in the future.

Answer 2

I assume that ul is inside li item in your page. If you want to slide parent ul of current li, then try

$(window).load(function () {
    $("li.submenu").hover(
        function () { $(this).parents("ul").slideDown("slow"); },
        function () { $(this).parents("ul").slideUp("slow"); }
    );
});

Answer 3

Don't forget that jQuery animations can't be applied to tables (display: table; sometimes fail also)