javascript - Menu Still Show When Change @media query -

i have 2 sidebar (side-bar , side-bar-mobile). first sidebar want see when screen in width > 768px, that.

@media screen , (min-width: 768px){        .side-bar{             display: block;        }        .side-bar-mobile{             display: none;        } } 

and when screen in width < 768px, side-bar hide , side-bar-mobile show toggle when click button.
css

@media screen , (max-width: 768px){        .side-bar{             display: none;        }        .side-bar-mobile{             display: none;        } } 

js

$('#toggle-menu').on('click', function(e){         $('.side-bar-mobile').slidetoggle();         e.preventdefault(); }) 

side-bar-mobile slide good. when resize window normal size (width > 768px), side-bar-mobile still show. can now? think problem in slidetoggle functions, make side-bar-mobile show when resize window. can't solve problem. me! thank you.

when screen width > 768 side-bar-mobile must hidden no matter what.

so in order need register window resize listener this:

window.onresize = function(){    var h = window.innerheight             || document.documentelement.clientheight             || document.getelementsbytagname('body')[0].clientheight;     var w = window.innerwidth              || document.documentelement.clientwidth              || document.getelementsbytagname('body')[0].clientwidth;      if(w > 768 ){         $('.side-bar-mobile').css({display:"none"});     } }