jQuery - slideUp / slideDown ne fonctionne pas sur ul?

Question

Je le code suivant dans mon 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>

Si je l'ai changé cela toggle("slide") il glisse depuis un côté, puis sort du même côté lorsque la souris entre et sort du li.submenu. Cela signifie que les éléments existent pour certain, et il n'y a pas de fautes de frappe. Cependant, les fonctions slideDown et slideUp ne semblent pas fonctionner (à moins que des moyens lents ultra rapide ...).

Les fichiers que je suis compris pour les jQuery UI et jQuery sont jquery-1.4.2.js et jquery-ui-1.7.2.custom.min.js. Cela suffit, non?

Je CSS pour spécifier que le sous-menu est affiché ou masqué instantanément (display: block; / display: none;) dans le cas où l'utilisateur ne dispose pas de JS. Est-il possible que cela cause du problème? Dois-je modifier la classe du sous-menu en utilisant JS afin que le CSS ne peut pas agir si JS est activé? Ou est-il un autre problème qui est pas causée par le CSS?

Answer 1

EDIT

Cette solution ne fonctionne pas en fait, maintenant que je l'ai testé. J'ai besoin du sous-menu pour rester visible lorsque la souris se déplace sur le lien. Dans ce cas, il ne fonctionne pas. Retour à la planche à dessin ..

Il se fait que ma solution originale fonctionne, mais seulement si je mets

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

avant qu'il (ce fixe les menus à l'opposé et à leur état d'origine sans que l'utilisateur même se rendre compte). Étrange, mais je peux vivre avec ça.

---

RÉPONSE ORIGINAL

Et bien après un certain temps, et un temps assez long en regardant le code se demandant ce que l'enfer était mal avec elle, il me est apparu que le lien directement dans le li.submenu a été fixé à display: block, avec largeur et hauteur prescrite à 100% . Il était en fait ce qui a besoin de changement, ce qui en jQuery ressembler à ce qui suit:

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

est-il ... problème résolu. Cependant, il semble prendre une seconde ou deux pour ramasser les instructions de diapositives. Ce signifie simplement que si quelqu'un passe au-dessus du li.submenu dans une seconde ou deux le chargement de page, puis il affichera le menu instantanément plutôt que de glisser -. Je pense que c'est pas un problème si

Espérons que cela aide quelqu'un à l'avenir.

Answer 2

Je suppose que ul est élément à l'intérieur de li dans votre page. Si vous voulez ul parent diapositive de li actuelle, essayez

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

Answer 3

Ne pas oublier que les animations jQuery ne peuvent pas être appliquées aux tables (display: table, échouent parfois aussi)