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

Screen-witdh depended menu toggle and auto open in javascript

本文关键字：javascript 并在 菜单 依赖于 屏幕      更新时间：2023-12-31

我正在为学校项目网站制作一个侧面板菜单。浏览了一下后，我发现了这个代码笔
代码笔最初附带的Javascript代码如下：

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

现在，我想做的是在这个页面上制作菜单，它使用JQuery进行切换，如果浏览器窗口宽度低于720像素，则自动打开。

我发现了JQueryJavascript的另一部分，它教会了我如何使用浏览器宽度。在将其与上面的现有代码合并后，我以以下内容结束：

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时隐藏菜单按钮（class.menu），当窗口大小低于720px时重新显示

由于这是我的第一个堆栈溢出问题，也是我第一次实际使用Javascript，请耐心等待…

我认为使用CSS@media anotation:可以最容易地实现这一点

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

如果您有不同的尺寸、设备或需要检查CSS3@media规则

重要：对我来说，当我们在屏幕大小上进行转换时，我需要定义所有大小才能有正确的行为，所以为了避免奇怪的事情，你必须定义这样的东西：

@media screen and (min-width: 720px) {
    /* STYLES HERE */
}
@media screen and (max-width: 720px) {
    /* STYLES HERE */
}
相关文章：