0

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

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 引起的问题？

4

3 回答 3

3

编辑

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

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

$("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在页面加载后的一两秒内将鼠标悬停在上面，那么它将立即显示菜单而不是滑动 - 我认为这不是问题。

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

于 2010-11-30T09:04:18.787 回答
0

我假设这ul是您页面中的 li 项目。如果要滑动ulcurrent 的父级li，请尝试

$(window).load(function () {
    $("li.submenu").hover(
        function () { $(this).parents("ul").slideDown("slow"); },
        function () { $(this).parents("ul").slideUp("slow"); }
    );
});
于 2010-11-30T08:29:06.467 回答
0

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

于 2015-03-16T09:53:27.690 回答