jQuery - slideUp / slidedown arbeiten nicht auf ul?

Question

Ich habe den folgenden Code in meiner 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>

Wenn ich dies änderte sich, es toggle("slide") in von einer Seite gleitet und tritt dann auf der gleichen Seite, wenn die Maus betritt und verlässt den li.submenu. Dies bedeutet, dass die Elemente existieren für bestimmte, und es gibt keine Fehler. Doch die slidedown und slideUp Funktionen scheinen nicht (es sei denn langsam Mittel extrem schnell ...) zu funktionieren.

Die Dateien, die ich darunter bin für jQuery und jQuery UI sind jQuery-1.4.2.js und jquery-ui-1.7.2.custom.min.js. Das ist genug, nicht wahr?

Ich habe CSS festlegen, dass das Untermenü angezeigt oder ausgeblendet sofort (display: block; / display: none;), falls der Benutzer JS nicht hat. Gibt es eine Chance, dass dies das Problem verursacht? Soll ich die Klasse des Untermenü mit JS verändern, so dass die CSS nicht auf sie wirken kann, wenn JS aktiviert ist? Oder gibt es ein anderes Problem, das nicht durch die CSS verursacht wird?

Answer 1

Bearbeiten

Diese Lösung nicht wirklich funktioniert, jetzt, wo ich es getestet haben. Ich brauche das Untermenü sichtbar zu bleiben, wenn die Maus über den Link auszieht. In diesem Fall ist es nicht. Zurück zum Zeichenbrett ..

Es stellt sich tatsächlich heraus, dass meine ursprüngliche Lösung funktioniert, aber nur, wenn ich put

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

, bevor es (dies wird die Menüs auf die entgegengesetzten und wieder in ihren ursprünglichen Zustand, ohne dass der Benutzer es merken). Seltsam, aber ich kann damit leben.

---

ORIGINAL ANTWORT

Nun nach einer Weile, und eine recht lange Zeit auf den Code anstarrt fragen, was zum Teufel mit ihm nicht in Ordnung war, kam mir der Gedanke, dass der Link direkt im li.submenu zu display: block eingestellt wurde, mit Breite und Höhe auf 100% . Es war eigentlich das die Veränderung benötigt, in den jQuery resultierenden wie die folgenden suchen:

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

Das ist es ... Problem gelöst. Allerdings scheint es, eine oder zwei Sekunden zu ergreifen, um die Schlitten Anweisungen zu holen. Dies bedeutet einfach, dass, wenn jemand schwebt über die li.submenu innerhalb einer Sekunde oder zwei der Seite geladen, dann wird es das Menü anzeigen sofort statt Gleiten. - Ich denke, dass ist kein Thema, obwohl

Hope, das hilft in Zukunft jemand aus.

Answer 2

Ich gehe davon aus, dass ul ist innen li Artikel auf Ihrer Seite. Wenn Sie Dia Mutter ul der aktuellen li wollen, dann versuchen

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

Answer 3

Vergessen Sie nicht, dass jQuery Animationen können nicht auf Tabellen angewendet werden (display: table, manchmal auch nicht)