jQuery下拉菜单和CSS Media Queries冲突

Question

So let's start with the HTML. Probably don't need to bother putting it here, but I'll show you guys anyway.

        <div class="menu col md12 sm02 mn03">
            <div class="lines"></div>
            <div class="lines"></div>
            <div class="lines"></div>
        </div>
        <div class="nav col mx07 lg08 md12 sm12 mn12">
            <ul>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Company</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Solutions</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Services</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Websites</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Software</a></li>
                <li class="col mx02 md02 sm04 mn06"><a href="#">Contact</a></li>
            </ul>
        </div>

Now for the CSS. I have it set so my menu button stays hidden.

.menu {display: none;}

And then when the screen gets below 701 pixels, the media queries kick in, part of which is this.

.menu {display: inherit;}
.nav {display: none;}

And then, good ol' jQuery comes in to make my navbar toggle on clicking the menu button.

$(document).ready(function() {
    $(".menu").click(function() {
        $(".nav").toggle("slow");
    });
});

So now for the issue. I go to the smaller screen size that activates my menu button and hides my navigation bar. Click the menu button, navbar shows up. Hooray! Click it again, it goes away. Hooray!

Except when I go back to the larger screen size, the navbar doesn't come back. The menu button disappears, but the navbar won't show up unless I go back to the smaller size, toggle it on, then go back to larger size again. I know what's going on here, that's the easy part. Jquery changes and overrides the CSS and tells the browser "Okay, just hide it all the time."

So question is, how do I make it so my navbar comes back once I get back to the larger screen size, regardless of the toggle state?

I don't have the code for this last part anymore, but at one point I had it to where Javascript was checking for the screen size, but JS and CSS screen sizes were never the same so I just gave up on that solution.

Thanks in advance for your answers.

Answer 1

如果你给nav这些类“visible-lg visible-md”，它可能会工作，我假设你使用bootstrap。

Answer 2

Found the solution, thanks to user instead suggesting matchMedia()

//screen size variables
var mqmn = window.matchMedia("screen and (min-width: 150px) and (max-width: 400px)")
var mqsm = window.matchMedia("screen and (min-width: 401px) and (max-width: 550px)")
var mqmd = window.matchMedia("screen and (min-width: 551px) and (max-width: 700px)")
var mqlg = window.matchMedia("screen and (min-width: 701px) and (max-width: 850px)")

//toggle drop-down menu
$(document).ready(function() {
    $(".menu").click(function() {
        $(".nav").toggle("slow");
    });
    $(window).resize(function(){
        if (mqmn.matches){
            //mn size
            $(".menu").show();
            $(".nav").hide();
        } else if (mqsm.matches) {
            //sm size
            $(".menu").show();
            $(".nav").hide();
        } else if (mqmd.matches) {
            //md size
            $(".menu").show();
            $(".nav").hide();
        } else if (mqlg.matches) {
            //lg size
            $(".menu").hide();
            $(".nav").show();
        } else {
            //mx size
            $(".menu").hide();
            $(".nav").show();
        }
    });
});