Javascript pour le menu déroulant (wp_nav_menu) ne fonctionne pas

J’essaie d’utiliser un script que j’utilise sur un autre site pour que mon menu de navigation s’anime correctement.

Voici le script:

jQuery(window).load(function() { $("#menu > div > ul > li > a").click(function (e) { // binding onclick if ($(this).parent().hasClass('selected')) { $("#menu .selected ul").slideUp(100); // hiding popups $("#menu .selected").removeClass("selected"); } else { $("#menu .selected ul").slideUp(100); // hiding popups $("#menu .selected").removeClass("selected"); if ($(this).next(".sub-menu").length) { $(this).parent().addClass("selected"); // display popup $(this).next(".sub-menu").children().slideDown(200); } } e.stopPropagation(); }); $("html").click(function () { // binding onclick to body $("#menu .selected ul").slideUp(100); // hiding popups $("#menu .selected").removeClass("selected"); }); });

Le code HTML avec lequel je travaille est différent de celui de l’autre site sur lequel je travaille, car j’essaie d’utiliser la sortie wp_nav_menu() par défaut de wp_nav_menu() pour le faire fonctionner. C’est une structure différente et je ne peux pas comprendre les ajustements à effectuer pour que cela fonctionne correctement.

Sortie de wp_nav_menu:

   Programming  Bakery
 LG! Cabaret
 Mainstage
 Outreach
 
 
 Get Involved  Audition
 Script Submissions
 Volunteer
 
 
 Blog
 About  Contact
 History
 Staff
 
 
 Donate

EDIT: Ajouter les styles de menu actuels:

 #menu { float: right; position: relative; top: 25px; } #menu > div > ul > li { display: inline-block; text-align: center; padding: 0 1em; } #menu > div > ul > li.menu-item-has-children a:after { content: " \f107"; font-family: FontAwesome; } #menu li a { color: #fff; text-decoration: none; font-weight: bold; } #menu li a:hover { color: #F73987;; } #menu > div > ul > li > ul { display: none; } #menu > div > ul > li > ul.selected { display: inline; }

Dans votre script, $(this).parent() fait en fait référence à l’élément li avant le lien.

Prenez le balisage suivant par exemple

      Programming

Avec

 $("#menu > div > ul > li > a")

En gros, vous sélectionnez Programming , donc

 $(this).parent().addClass("selected");

ajoute la classe selected à l’élément li , pas l’élément ul qui se trouve être

juste en dessous de Programming dans votre Programming . Vous devriez append la classe selected aux enfants qui ne sont pas parents.

Essayez de changer le script comme suit

 $("#menu > div > ul > li > a").click(function (e) { // binding onclick if ($(this).next(".sub-menu").hasClass('selected')) { $("#menu .selected ul").slideUp(100); // hiding popups $("#menu .selected").removeClass("selected"); } else { $("#menu .selected ul").slideUp(100); // hiding popups $("#menu .selected").removeClass("selected"); if ($(this).next(".sub-menu").length) { $(this).next(".sub-menu").addClass("selected"); // display popup $(this).next(".sub-menu").children().slideDown(200); } } e.stopPropagation(); });

MODIFIER

Vous ne savez pas comment fonctionne le menu d’origine, mais cela pourrait être une solution basée sur vos définitions CSS.