如何使用 jquery 在移动设备上隐藏元素？

Question

在我的索引页的脚本标签中，我有：

if ($(window).width() < 700px){
  $('container').hide();
}

在我的控制台中，我收到了一个

未捕获的 SyntaxError：无效或意外输入

Answer 1

您的代码中有两个问题。首先700 px 不是一个有效的表达式。如果它是在引号中使其成为一个字符串，那么它将无法使用< 运算符（如您所期望的那样）。由于width() 方法返回一个整数，只需将其与700 进行比较即可。

其次，container 不是有效的选择器，因为 HTML 中没有 <container /> 元素。我认为这应该是一个 id 或 class 选择器，而您错过了 # 或 . 前缀。

if ($(window).width() < 700) {
  $('#container').hide(); // or .container, maybe?
}

然而，如果你试图让你的页面布局响应显示的宽度，你不应该使用 JS。改用 CSS 媒体查询：

@media (max-width: 700px) { 
  #container {
    display: none;
  }
}