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 j'ai changé cela toggle("slide") il glisse depuis un côté, puis sort sur la même côté lorsque la souris entre et quitte le li.submenu. Cela signifie que les éléments existent pour défini, et il n'y a pas de fautes de frappe. Cependant les fonctions slideDown et slideUp ne semblent pas fonctionner (à moins que slow ne signifie ultra rapide ...).

Les fichiers que j'inclus pour jQuery et jQuery UI sont jquery-1.4.2.js et jquery-ui-1.7.2.custom.min.js. C'est assez, n'est-ce pas?

J'ai CSS pour spécifier que le sous-menu est affiché ou masqué instantanément (display: block;/display: none;) dans le cas où l'utilisateur n'a pas JS. Y a-t-il une chance que cela cause le problème? Dois-je modifier la classe du sous-menu en utilisant JS afin que le CSS ne puisse pas agir dessus si JS est activé? Ou y a-t-il un autre problème qui n'est pas causé 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 quitte le lien. Dans ce cas, ce n'est pas le cas. Retour à la planche à dessin ..

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

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

avant (cela fixe les menus à l'opposé et à leur état d'origine sans que l'utilisateur s'en aperçoive). Étrange, mais je peux vivre avec ça.

---

RÉPONSE ORIGINAL

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 était défini sur display: block, avec la largeur et la hauteur définies sur 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"); } 
    ); 
}); 

C'est-il ... problème résolu. Cependant, il semble prendre une seconde ou deux pour prendre les instructions de diapositives. Cela signifie simplement que si quelqu'un survole le li.submenu dans une seconde ou deux de la page de chargement, il affichera le menu instantanément plutôt que de glisser - Je pense que c'est un non-problème si.

Espérons que cela aidera quelqu'un dans le futur.

Answer 2

Je suppose que ul est à l'intérieur li article dans votre page. Si vous voulez faire glisser parent ul de li en cours, puis 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, parfois échouent aussi)