Tengo algunos jQuery slideToggles diferentes en mi sitio y no tengo ningún problema, pero parece que el menú de navegación móvil no funciona. Lo tengo funcionando bien en mi sitio local, pero en mi sitio en vivo no pasa nada.
Mi sitio en vivo es https://toolcurve.com
<ul class="menu"> <li class="item"><a href="">Main menu link</a> <img src="drop-chev.svg" class="sub-menu-drop "> <ul class="dropdown"> <li class="sub-item"><a href=""></a>Sub Menu Link</li> <li class="sub-item"><a href=""></a>Sub Menu Link</li> </ul> </li> <li class="item"><a href="">Main menu link</a> <img src="drop-chev.svg" class="sub-menu-drop "> <ul class="dropdown"> <li class="sub-item"><a href=""></a>Sub Menu Link</li> <li class="sub-item"><a href=""></a>Sub Menu Link</li> </ul> </li> </ul>El JS que uso es
$(function(){ if (window.innerWidth < 768){ var $submenu = $(".dropdown"); $(".sub-menu-drop").on("click", function(e){ $(this).next($submenu).slideToggle(); }); } });Esto es muy similar a los otros slideToggles que tengo en mi sitio que funcionan bien, pero parece que este funciona en mi sitio en vivo, pero funciona bien en mi sitio local.
<img src="drop-chev.svg" class="sub-menu-drop "> //SPACE EXISTS <img src="drop-chev.svg" class="sub-menu-drop"> //SPACE REMOVEDQUITE EL ESPACIO ADICIONAL AL FINAL DE SU CLASE EN LA ETIQUETA DE LA IMAGEN, ESA ES LA RAZÓN POR LA QUE NO SE ESTÁ DIRIGIENDO CORRECTAMENTE