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

Answer 2

处理不同屏幕尺寸的最佳方法是在CSS中使用媒体查询，但如果您使用Jquery执行此操作，则使用： -

Jquery中的

$(window).width()。

在此处阅读更多内容： - http://api.jquery.com/width/

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

2 个答案: