Jquery with Media Query problem

hi there
i have horizontal menu and when the device size is scaled down i made an icon to be shown instead of that and hide that horizontal menu:
When this icon is clicked it shows me a vertical menu with an extra toggle buton so when i press it it toggles the menu and shows back the icon.
The problem is that when i do this and after that i again go back to a bigger screen size the icon its not hidden, instead it stays there together with the horziontal menu.
How can i get rid of this bug??
here is the jquery i use to toggle and hide it:

 $(".toggle").click(function(e){
                if($(".mobMenu").css("display") == "none"){
                    $("#menu").slideUp();
                    setTimeout(function() { $(".mobMenu").fadeIn(); }, 500);
                }else{
                    $(".mobMenu").hide();
                }
            });

Code (markup):

 

Well, to be frank, sounds like you're dicking with things in your scripting that have no business being done FROM scripting -- like some stupid animated crap menu.... and you say this icon is for MOBILE?!? You do know that scripted /drop down / fade-in type menus are complete accessible trash, PARTICULARLY on small screens, right?!?

This reeks of throwing scripting at a non-issue; or do you have 'link-overload' issues with the menu? (so many menu items it confuses users into not being able to find anything) -- I would suspect you've got bigger problems on the page than how the menu is handled when things get responsive -- and playing games like hiding the menu outright with some counterintuitive icon and script-tard BS is usually NOT the answer.

Though that's guessing wildly without seeing the actual page. Even IF one were to implement this, your script should be doing a simple class-swap instead of that stupid malfing idiotic 'fade-in' crap, MAYBE a height set shiv to deal with CSS3 being too stupid to do transitions on height:auto, and everything else about it's behavior handled from inside the CSS, not the script.

 

You would control what is visible or not visible with CSS media queries, though you could do it with JavaScript but that is just bad practice IMO. Here's a good link on media queries: http://css-tricks.com/css-media-queries/
Save jQuery/Javascript for "prettying" it up if you "want: to.