Solution disappearance responsive navigation after open/close

问题

I asked this before, but still not successful. Hope someone can help me now... In the fiddle you see a responsive menu that has 4 menu-items horizontal inline when it is larger than 1000px. Smaller than 1000px the menu shows a nav-btn (now a RED box!) that onclick shows the menu-items, but when open and close and resize to larger than 1000px the rest of the 3 menu-items don't show up. I did some tests with media queries but i think the solution must be find in the javascript part. Anyone can handle this challenge?

Here the FIDDLE

$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').fadeToggle(300);
});
});

回答1:

Well, the problem is that your fadeToggle sets your nav > ul to style="display: none". Styles set directly overrides any stylesheets, unless you use !important.

As such, and combining with NMindz answer, try this:

@media all and (min-width: 1000px) {
  nav ul { 
    display: block !important;
    top: 60px;
  }
}

You could also try a pure css solution that would probably be better. Something like

nav ul.show {
    display: block;
}

And for the javascript

$(function() {
    $('.nav-btn').click(function(event) {
        $('nav ul').toggleClass("show");
    });
});

回答2:

You might want to add a new media query like i did here @ FIDDLE

@media all and (min-width: 1000px) {
  nav ul { 
    display: block;
    top: 60px;
  }
}

来源：https://stackoverflow.com/questions/28394678/solution-disappearance-responsive-navigation-after-open-close