jquery if 语句基于屏幕大小答案

【问题标题】：jquery if statement based on screen sizejquery if 语句基于屏幕大小
【发布时间】：2011-11-16 08:09:54
【问题描述】：

我有一个滑出式导航栏，我希望在 >=1024 的屏幕宽度上默认打开并默认关闭 = 1024，我想有一种方法可以在 if 语句中设置默认切换状态。任何帮助将不胜感激。这是我到目前为止的切换功能。

$('a.expand').toggle(function() {
        $(this).addClass("open");
        $('#nav').animate({width: 50},{queue:false, duration:300});
        $('.wrapify').animate({marginLeft: 50},{queue:false, duration:300});
        $('.primarynav ul').hide();
        $('.navlogo').hide();   

  }, function() {
        $(this).removeClass("open");
        $('#nav').animate({width: 200},{queue:false, duration:300});
        $('.wrapify').animate({marginLeft: 200},{queue:false, duration:300});
        $('.primarynav ul').show();
        $('.navlogo').show(); 

  });

【问题讨论】：

这听起来像是 CSS3 Media Queries 而不是 jQuery 的工作。
我最初使用 CSS3 媒体查询，但仍然需要切换以动画打开和关闭。我似乎无法弄清楚如何将默认切换状态设置为关闭，我希望用 jquery 来做到这一点。我遇到的问题是，当面板中的媒体查询在技术上仍处于打开状态时，所以当我第一次单击它时它只是试图再次关闭，然后就可以正常工作了。

标签： jquery toggle screen-size

【解决方案1】：

$(document).ready(function() {
    // This will fire when document is ready:
    $(window).resize(function() {
        // This will fire each time the window is resized:
        if($(window).width() >= 1024) {
            // if larger or equal
            $('.element').show();
        } else {
            // if smaller
            $('.element').hide();
        }
    }).resize(); // This will simulate a resize to trigger the initial run.
});

编辑：

或者也许这就是你所追求的：

$(document).ready(function() {
    if($(window).width() >= 1024) {
        $('a.expand').click();
    }
});

如果宽度正确，这将在文档准备好时切换元素。

【讨论】：

Amar，您能否再解释一下，或者使用我提供的代码向我展示一个示例？感谢您的帮助。
添加了一些 cmets，以及显示和隐藏类名为“element”的元素的示例。在您当前的代码中，实际上看起来您希望在单击某些内容时显示某些内容。是这样还是您希望它在实际调整窗口大小时发生变化。您是否希望元素在单击时根据窗口的大小表现不同？

【解决方案2】：

只测试screen.width > 1024。

https://developer.mozilla.org/en/DOM/window.screen.width

【讨论】：

我用它来测试屏幕宽度，但似乎无法弄清楚从这里到哪里去获取切换默认状态以根据所述宽度进行更改。 $(document).ready(function() { if ((screen.width>=1024) ) { } else { } });
您希望在用户调整窗口大小时更改它吗？如果是这样，请使用：$(window).resize(function() { if (screen.width>=1024) ... });
我想我需要在屏幕尺寸为 1024 时更改它，或者如果它们调整到低于 1024。我的主要问题是让切换的默认状态在 1024。我可以用 css3 媒体查询来完成剩下的工作，但希望 jquery 来做动画和切换。
CSS3 很棒，但远非通用。不要太依赖它。

【解决方案3】：

我正在做一个类似的项目，这段代码对我有用..

if($(window).width() >= 540) {
   //code to execute
}

【讨论】：