jquery - Why isn't this simple if statement working?

Question

I want to show/hide the section depending on the window width. I tried:

$(function(){
    "use strict";

    if($(window).width() > 600) {
        $("section").hide();
    }
    else {
        $("section").show();
    }
});

HTML:

<section>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</section>

But im not seeing the section hide. What am I doing wrong?

demo: http://jsfiddle.net/jLx5V/

Answer 1

if声明本身很好。我的猜测是，当您第一次进入该页面时，窗口的宽度超过 600 像素。您还没有挂钩该resize事件，因此当窗口大小发生变化时，您不会重新运行该代码。

这就是它的样子：更新的小提琴

$(function(){
    "use strict";

    resize();
    $(window).resize(resize);

    function resize() {
        $("section").toggle($(window).width() <= 600);
    }
});

这样做：

1. 定义一个resize函数，section根据窗口的宽度显示或隐藏所有元素（如果宽度为 600px 或更小则显示它们，如果更多则隐藏它们）。

2. 准备好调用resizeDOM（这是您最初调用它的时间）。

3. resize将它与事件挂钩，window以便在用户调整窗口大小时再次调用它。

4. 使用toggle(flag)，这是“如果标志为真则显示，否则隐藏”的简写。

Answer 2

为了补充基于 javascript 的答案，我想指出这种特殊行为可以通过媒体查询轻松实现：

@media (max-width: 600px) {
    section {
        display: none;
    }
}

示例： http: //jsfiddle.net/jLx5V/10/（尝试调整输出窗格的大小）

Answer 3

Jsfiddle 将结果加载到 iframe 中。

在这种情况下$(window).width()，获取 iframe 的大小，而不是您看到的实际窗口。

Answer 4

您可能应该绑定到窗口调整大小，而不仅仅是在 dom 加载...

$(function () {
  "use strict";
  $(window).resize(function (event) {
    if ($(window).width() >= 600) {
        $("section").hide();
    } else {
        $("section").show();
    }
  });
});

http://jsfiddle.net/Mutmatt/jLx5V/5/