Question

我正在尝试为学校项目网站制作侧面菜单。浏览了一下之后，我找到了This codepen 最初与codepen一起提供的Javascript代码如下：

$('.menu a, .nav a').on('click', function () {  
   $('.wrapper').toggleClass('active');  
});

现在，我正在尝试做的是在此页面上创建菜单，使用JQuery进行切换，如果浏览器窗口宽度低于720像素，则自动打开。

我发现了JQuery-Javascript的另一部分，它让我觉得如何使用浏览器宽度。在将其与上面的现有代码合并之后，我结束了这个：

function checkWindowSize() {  
    if ( $(window).width() < 720 )  {
        var smallscreen = true;
    }  
    else {  
        var smallscreen = false;  
        $('.wrapper').toggleClass('active');  
    }  
}  

if (smallscreen = true)  {
    $('.menu a, .nav a').on('click', function () {  
        $('.wrapper').toggleClass('active');  
    });  
}

同样，我需要它做的是：

在页面加载或调整大小时，请检查浏览器窗口的宽度
如果它低于720px，请启用菜单的切换代码，使其自动隐藏
如果超过720px，请禁用菜单切换，取消隐藏菜单，并将其保持打开状态。
当浏览器宽度超过720px时，隐藏菜单按钮（类.menu）并在窗口大小低于720px时重新显示

由于这是我的第一个Stackoverflow问题以及我第一次实际使用Javascript，请耐心等待...

Answer 1

我认为使用CSS @media anotation：

可以实现这一目标

@media screen and (max-width: 720px) {
    // your needed style here
}

如果您有不同的尺寸，设备或需求，请检查CSS3@media rule。

重要：对我来说，当我们在屏幕尺寸上进行转换时，我需要定义所有尺寸以保持正确的行为，所以为了避免奇怪的事情，你必须定义如下内容：

@media screen and (min-width: 720px) {
    /* STYLES HERE */
}

@media screen and (max-width: 720px) {
    /* STYLES HERE */
}

屏幕宽度依赖菜单切换并在javascript中自动打开

1 个答案: