javascript - jQuery - toggleClass + slideToggle not working as expected -


i relatively new learning html, css , javascript. creating sort of test site, learning purposes , have started diving in mobile responsive websites.

i have test site has mobile navigation button hidden, css media query set display block , hide normal navigation menu. have list items mobile navigation menu. show/hide this, i've created .toggleclass() jquery function:

function clicktouchmenu() {     $('#menuico').on('click touch', function()     {         var $mobmen = $(".mobilemenu");         $mobmen.toggleclass('clicked');     }); }; 

the above working, wanted add .slidetoggle() menu effect. if add in underneath .toggleclass() $('.clicked').slidetoggle(); menu acts bit strange, if click on menu icon, nothing happens, repeatedly clicking, seems kick in life , start working sliding , down.

as new this, expect doing wrong, or on complicating quite simple.

try removing clicked class , using slidetoggle() on mobilemenu so:

$('#menuico').on('click touch', function() {     var $mobmen = $("#mobilemenu")     $mobmen.slidetoggle(); }); 

i think problem if clicked class toggling whether or not menu shown it's interfering slidetoggle(). because purpose of slidetoggle() make it's sliding in , out of view (aka toggling whether or not it's hidden animation). need 1 or other slidetoggle() includes animation.

i've added fiddle, it's demo don't know html or css like:

fiddle: https://jsfiddle.net/668mucca/3/

link entry on slidetoggle() in jquery docs measure: http://api.jquery.com/slidetoggle/


Comments

Popular posts from this blog

Command prompt result in label. Python 2.7 -

javascript - How do I use URL parameters to change link href on page? -

amazon web services - AWS Route53 Trying To Get Site To Resolve To www -