Question

我想根据窗口宽度显示/隐藏部分。我试过了：

$(function(){
    "use strict";

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

HTML：

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

但我没有看到该部分隐藏。我做错了什么？

演示：http://jsfiddle.net/jLx5V/

Answer 1

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

这就是：Updated Fiddle

$(function(){
    "use strict";

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

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

这样做：

定义resize函数，根据窗口的宽度显示或隐藏所有section元素（如果宽度为600px或更小，则显示它们，如果更多则隐藏它们。）
在DOM准备就绪时调用resize（就在您最初调用它时）。
将其连接到resize上的window事件，以便在用户调整窗口大小时再次调用它。
使用toggle(flag)，这是“如果标志为真，则显示，否则隐藏。”

Answer 2

Jsfiddle将结果加载到iframe中。

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

Answer 3

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

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

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

Answer 4

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

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

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

为什么这个简单的if语句不起作用？

4 个答案: