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上，那么它会立即显示菜单而不是滑动 - 我认为这不是问题。

希望将来可以帮助某人。

Answer 2

我认为ul位于您网页中的li项目内。如果您想要滑动当前ul的父li，请尝试

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

Answer 3

不要忘记jQuery动画不能应用于表格（显示：表格;有时也会失败）

jQuery - slideUp / slideDown不能用于ul吗？

3 个答案: