Question

如果窗口的宽度小于400px，我试图将div设置为隐藏。但我正在尝试似乎没有工作.. 我做错了什么？

JS：

$(document).ready(function () {
   if ($(window).width <= 400)
    {
        $("#nav").css('visibility','hidden');
    }
    else
    {
        ("#nav").css('visibility','visible');
    }

});

HTML：

<div id="nav">
    //... a few lines of paragraphs and lists ...
</div>

CSS：

#nav {                  /* Navigation Bar */
    width: 37%;
    position: relative;
    left: 30px;
    top: 48px;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    visibility: visible;
}

就我而言，HTML和CSS没有任何问题。在我看来JS是是什么导致它不起作用。

Answer 1

有一些问题

应为$(window).width()
您在$声明

("#nav").css('visibility','visible');

else

为了在调整大小时触发此操作，您需要调用resize函数（否则它只会在页面加载时触发一次）：
```
$(window).resize(function(){

  //run your code

});
```
这可以通过css媒体查询非常简单地完成（并且没有jquery调整大小功能的开销）：
```
@media only screen and (max-width: 400px){
   #nav {
      visibility: hidden;
   }

}
```

Answer 2

尝试

$("#nav").css('display','none'); // for hidden

和

$("#nav").css('display','block'); // for visibility

Answer 3

您只需检查一次窗口大小...文档加载时。

尝试 document.ready

$( window ).resize(function() {
if ($(window).width() <= 400)
    {
        $("#nav").css('visibility','hidden');
    }
    else
    {
        ("#nav").css('visibility','visible');
    }
});

Answer 4

看起来我是派对的最新成员，但这就是我想出的：

jsFiddle Demo

<强> jQuery的：

var resdiv = $('#result');
var ws;

$(window).on('resize', function(){
    ws = $(window).width();
    resdiv.html(ws);
    if (ws <= 400) {
        $("#nav").css('display','none');
    }else{
        $("#nav").css('display','block');
    }
});

<强> HTML：

<div id="result"></div>
<div id="nav">
    A few lines of paragraphs and lists ... 
</div>

<强> CSS：

#result{width:80px;height:30px;position:fixed;background:wheat;}
#nav {                  /* Navigation Bar */
    width: 37%;
    position: relative;
    left: 30px;
    top: 48px;
    z-index: 2;
    margin-left: auto;
    margin-right: auto;
    visibility: visible;
}

Answer 5

您需要调用.width()函数。

 if ($(window).width() <= 400)
                    ^^

Answer 6

你可以用JS和纯CSS来做到这一点。对于JS，您需要将事件绑定到窗口的resize事件：

JavaScript解决方案：

$(window).on('resize', function () {
    if ($(this).width() <= 400) {
        $("#nav").css('visibility','hidden');
    } else {
        ("#nav").css('visibility','visible');
    }
});

备注：

执行此方法时需要考虑一些注意事项。其中一个，并非所有浏览器都以相同的方式触发resize事件。调整大小完成后，有些人会触发事件。当窗口增大或缩小时，其他会多次触发resize事件。这种行为可能与您的意图略有不同。

此外，关于.width()，.width()是一种方法，因此需要将括号作为函数调用，而不是像上面那样仅仅.width。

CSS解决方案：

通过使用媒体查询，您可以完成相同的任务。请注意，媒体查询支持仍在不断发展，因此一些旧版浏览器（IE 8）不支持它们。这可能会限制您对此方法的使用：

/* Declare an initial state */ #nav { visibility: visible; } /* Override that based on the window size */ @media only screen (max-width: 400px) { #nav { visibility: hidden; } }

最后的想法......

上面描述的CSS方法应该提供更流畅的用户体验，因为您没有因任何计算而使用JavaScript。这一切都由浏览器在内部处理，通过删除额外的抽象层为您的用户提供更流畅的体验。

另请注意，根据您所需的效果，请务必查看visibility和display的文档，以了解其相应的用例。根据MDN文件的可见性：


可见性CSS属性有两个目的：

  隐藏的价值隐藏了一个元素，但留下了本来应有的空间   2.折叠值隐藏表的行或列。它也会破坏XUL元素。

同样是display的MDN文档：


显示CSS属性指定用于元素的渲染框的类型。在HTML中，默认显示属性值取自HTML规范中描述的行为或浏览器/用户默认样式表。 XML中的默认值是内联的。

除了许多不同的显示框类型之外，值none还可以关闭元素的显示;当您使用none时，所有后代元素的显示都会关闭。渲染文档，好像文档树中不存在该元素。

根据您是否希望元素在屏幕上保持其空间但不可见，您可能需要查看display而不是visibility。如果您决定使用上面的JavaScript代码段，请更改以下行：

.css('visibility', 'hidden'); // to .hide() // and .css('visibility', 'visible'); // to .show()

作为参考，请查看以下文档：

.hide()

.show()

Answer 7

您不需要JS，只需使用CSS媒体查询：

＆＃13;

@media only all and (max-width: 400px) {
  #nav{
    visibility: hidden;
  }
}

＆＃13;

<div id="nav">Foo bar</div>

＆＃13;

根据屏幕宽度更改div的可见性

7 个答案:

JavaScript解决方案：

CSS解决方案：

最后的想法......