jQuery - slideUp/slideDown 在 ul 上不起作用？

Question

我的母版页中有以下代码:

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>

如果我将其更改为 toggle("slide")，它会从一侧滑入，然后在鼠标进入和离开 li.submenu 时从同一侧退出>。这意味着元素是确定存在的，并且没有错别字。然而，slideDown 和 slideUp 功能似乎没有发挥作用(除非慢意味着超快......)。

我为 jQuery 和 jQuery UI 添加的文件是 jquery-1.4.2.js 和 jquery-ui-1.7.2.custom.min.js。够了吧？

我有 CSS 来指定立即显示或隐藏子菜单 (display: block;/display: none;) 以防用户没有 JS。这是否有可能导致问题？我是否应该使用 JS 更改子菜单的类，以便在启用 JS 时 CSS 无法对其执行操作？还是有其他一些不是由 CSS 引起的问题？

Answer 1

编辑

这个解决方案实际上不起作用，现在我已经测试过了。当鼠标移出链接时，我需要子菜单保持可见。在这种情况下，它没有。回到绘图板..

事实证明我原来的解决方案确实有效，但前提是我把

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

在它之前(这会将菜单设置为相反的状态，并在用户甚至没有意识到的情况下返回到它们的原始状态)。奇怪，但我可以接受。

---

原始答案

好吧，过了一会儿，我盯着代码看了很长时间，想知道它到底出了什么问题，我突然想到 li.submenu 中的链接直接设置为 display: block，宽度和高度设置为 100%。实际上正是这需要更改，导致 jQuery 如下所示:

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

就是这样……问题解决了。但是，似乎需要一两秒钟才能获取幻灯片说明。这只是意味着如果有人在页面加载的一两秒内将鼠标悬停在 li.submenu 上，那么它将立即显示菜单而不是滑动 - 我认为这不是问题。

希望这对将来的人有所帮助。