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

jQuery toggle menu, default hidden below x pixels, how?

本文关键字:像素 如何 隐藏 菜单 默认 jQuery      更新时间:2023-09-26

我有以下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>

…我可以在手机屏幕上切换菜单。

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

提前感谢!

我认为一个选择是使用像

这样的媒体查询
@media screen and (max-width:500px) {
    #nav {
        display:none;
    }
}

演示:小提琴

处理不同屏幕尺寸的最佳方法是在CSS中使用媒体查询,但如果你使用Jquery,则使用:-

$(window).width() in Jquery.

在这里阅读更多内容:- http://api.jquery.com/width/