javascript - jQuery 切换菜单，默认隐藏在 x 像素以下，如何实现？

Question

我有以下 jQuery 代码:

<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#nav").hide();
    $("#toggle-nav").click(function () {
        $("#nav").slideToggle('fast');
    });
});
</script>

这个是 HTML 的:

<button id="toggle-nav">...</button>
<nav id="nav">...</nav>

...这非常适合我可以切换移动设备尺寸屏幕的菜单。

我的新问题是我不知道如何设置默认隐藏菜单的屏幕宽度起点。

提前致谢!

Answer 1

我认为一种选择是使用 media query喜欢

@media screen and (max-width:500px) {
    #nav {
        display:none;
    }
}

演示:Fiddle