Remove "display: none" inline style

Remove "display: none" inline style

So I created a super simple jQuery script, my first. Just learning jQuery. It's a simple toggle menu that kicks in for small screens:

  1. jQuery(document).ready(function($){
  2. // Show/hide the navigation
  3. $('.menu-toggle').click(function() {
  4. $('#menu-secondary').slideToggle(150);
  5. $(".menu-toggle a").toggleClass("show-x");
  6. });
  7. });

            #menu-secondary slides down when you touch the .menu-toggle, which is a little square image. I change the class on .menu-toggle, so that I can reposition a sprite image to make it go from a 3-line menu icon when the menu is closed to an "X" when the menu is open.

            Here's the problem: If in a desktop browser I narrow the window, toggle the menu open and close, then resize the window to more normal desktop size, the regular menu does not display -- because the script during toggling has set an in line style on the menu div (#menu-secondary) to "display: none."

            Have to hit the logo/home link or refresh the page so the regular menu comes back. I don't know how often someone would encounter this in the real world, but I'd like to fix. I'm guessing this is not to difficult. Thoughts?