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
Post a Comment