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

Posted 2023-05-09

【中文标题】如何使用 jquery 在移动设备上隐藏元素？

【英文标题】：How to use jquery to hide elements on mobile?

【发布时间】：2020-06-19 10:01:11

【问题描述】：

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

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

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

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

【问题讨论】：

去掉“px”就可以了。

【参考方案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;
  

【讨论】：

是像素问题，谢谢！我正在使用 CSS 媒体查询，但我需要它作为稍后使用的切换功能。