Estoy tratando de crear un megamenú en mi sitio y activarlo a través de jquery para deslizarlo hacia abajo con un li click y demás.

Encuentre mi HTML a continuación como guía, seguido de mi Jquery.

 <nav class="nav-left"> <a class="top-menu" href="">Search</a> <ul> <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-77 menu-item-has-children"> <a class="underline-animation" href="/junior/">Junior</a> </li> <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-78"> <a class="underline-animation" href="/senior/">Senior</a> </li> <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-79"> <a class="underline-animation" href="/sixth/">Sixth</a> </li> <li class=" menu-item menu-item-type-post_type menu-item-object-page menu-item-76"> <a class="underline-animation" href="/admissions/">Admissions</a> </li> </ul> </nav>

Megamenú

 <div class="megamenu { current jquery puts li click into here but doesnt remove the old one }"> content here </div>

jquery

 $('ul li.menu-item').click(function () { var nav_name = $(this).text(); event.preventDefault(); $(".megamenu").slideDown(); $(".megamenu").toggleClass(nav_name);

});

Me preguntaba si el jquery que estoy usando va en la dirección correcta o si hay una mejor manera de construir esto.

estoy usando wordpress