Redéfinition styles pseudo dans jQuery
-
29-09-2019 - |
Question
Comment puis-je remplacer le CSS ci-dessous avec jQuery?
(Les animations ne sont pas en cours d'exécution et il est juste un interrupteur instantané.)
menu span ul {display: none;}
menu span:hover ul {display: block;}
$('#menu span').mouseenter(function(){
$('#menu span ul').slideDown('fast');
}).mouseleave(function(){
$('#menu span ul').slideUp('fast');
});
La solution
Une astuce pour degredation gracieuse est de ne pas avoir à remplacer les styles, comme ceci:
<noscript>
<style type="text/css">#menu span:hover ul {display: block;}</style>
</noscript>
une feuille de style liée de la même manière avec tous ces pour-non-JS-utilisateur styles.
Ou, faites-le par une classe que vous appliquez à #menu
que vous pouvez supprimer sorte que les règles ne correspondent plus, comme ceci:
#menu span ul {display: none;}
#menu.noJS span:hover ul {display: block;}
Et dans votre script simplement supprimer cette classe:
$("#menu").removeClass("noJS");
Comme une note de côté, vous pouvez mincir votre code en utilisant .hover()
et .slideToggle()
comme ceci:
$('#menu span').hover(function(){
$(this).find('ul').slideToggle('fast');
});
Autres conseils
Vous ne voyez pas l'animation parce que votre css est prépondérant, il.
Supprimer
menu span:hover ul {display: block;}
Je ne contrarient pas essayer de remplacer le code CSS pour accueillir les navigateurs qui n'ont pas js activé. Le nombre est si petit qu'il ne vaut pas considération.