javascript - How can I change style of element with jQuery function and media query when resize event working -

i'm making responsive web site, , have problems @ resize. using media query @ ww<1280, ww<1024, ww<640, controll elements jquery functions.

when document loaded, media query , functions worked well. but, when try jquery functions resize window, there many problems.

one of function wrote is,

var menuopen = function() {   var ctrybtn = $(".countrymenu input[type=button]");   var ctrymenu = $(".countrymenu");   var subgnb = $("#subgnb");   var gnbbtn = $("#header button.mobilegnbbtn");   var mygnb = $("#gnb");   var schbtn = $(".mobilefindbtn");   var schmenu = $(".utilmenu");   var gnbdown = function () {     $("#gnb ul").append("<li class='mobilesitemap'><a href='sitemap.html'>site map</a></li>");     mygnb.slidedown(500,function () {       $(".mobilegnbbtn").css({         "width":"37px",         "height":"37px",         "background-image":"url(image/common/btn-close-mobile.png)",         "background-size":"cover"       });     });   };   var gnbup = function () {     if ($(window).width() <= 623) {       mygnb.slideup(500, function () {         $(".mobilesitemap").remove();         $(".mobilegnbbtn").css({           "width":"43px",           "height":"37px",           "background-image":"url(image/common/btn-menu-mobile.png)"         });       });     } else {       $(".mobilesitemap").remove();       return false;     }   };   ctrybtn.on("click", function () {     if(issubgnb === false){       subgnb.slidedown(500);       issubgnb = true;     } else {       subgnb.slideup(500);       issubgnb = false;     }   });    gnbbtn.on("click", function () {     if(isgnb === false){       if(issubgnb === true || issearch === true){         subgnb.slideup(500);         issubgnb = false;         schmenu.slideup(500);         issearch = false;         ctrymenu.fadein(300);       }       gnbdown();       isgnb = true;     } else {       gnbup();       isgnb = false;     }   });   schbtn.on("click", function () {     if (issearch === false) {       if (isgnb === true || issubgnb === true ) {         gnbup();         isgnb = false;         subgnb.slideup(500);         issubgnb = false;       }       ctrymenu.fadeout(100);       schmenu.slidedown(300);       issearch = true;     } else {       schmenu.slideup(100);       issearch = false;       ctrymenu.fadein(300);     }   }); }; 

#gnb absolute positioned @ ww<640, invisible(display:none), , different children elements setting ww sizes.
#gnb relative positioned @ upper 640px ww.

then wrote resize event like:

$(window).on("resize", function () {   var gnbpc = function () {     $("#gnb").css({       "width":"410px",       "height":"76px",       "letter-spacing":"-0.04em",       "margin-left":"26.866%"     });   };   var togglemobile = function () {     if ($(window).width() <= 623 ) {       $("#subgnb").css({"display":"none"});     } else {       gnbpc();       $("#subgnb").css({"display":"none"});     }   };   cleartimeout(timer);   timer = settimeout(togglemobile, delta); }); 

i set var delta = null; var timer = null;

under 640px ww, when click button, #gnb slidedown, , slideup well.
when #gnb slideup, try resize upper 640px,
there no #gnb because had invisibled when slideup() finished.

so try give css set(default value of css ww>640),
written inline, mediaquery didn't work.

i want solution, when trying resize window,
function work reload default setting ww size.
or, solve resizing problems.

i want reset when resize,
if #gnb opened, try resize, want closed change default setting ww size.