使用jquery删除具有一定宽度的div

Posted 2023-03-06

【中文标题】使用jquery删除具有一定宽度的div

【英文标题】：Removing a div with certain width with jquery

【发布时间】：2012-09-07 17:15:20

【问题描述】：

我正在尝试为移动设备制作一个完全不同的网页版本，为此，当浏览器窗口宽度大于 767 像素时，我需要某些 div 消失。我试图用 jQuery 来做这样的事情：

<script>
if ( $('body').width > 767px ) 
    $('.mobile').remove();

</script>

但它根本不起作用。

我想在大版本中消失的 div 有 .mobile 类。

【问题讨论】：

它被称为 CSS 媒体查询，它完全可以在没有 javascript 的情况下完成您尝试做的事情。

【参考方案1】：

尝试使用媒体查询。看http://cssmediaqueries.com/

【参考方案2】：

.width()会返回一个像素值，所以需要检查767

您可以使用媒体查询，但应考虑浏览器支持：http://caniuse.com/css-mediaqueries

【参考方案3】：

你不一定需要 JS。你看过media queries吗？

@media only screen and (min-width: 767px) 
    .mobile  display: none     

如果你还想使用 jQuery：

if ( $('body').width > 767 ) 
    $('.mobile').css('display', 'none');

【讨论】：

非常感谢！我是第一次尝试媒体查询和 java 脚本，所以有点混乱..

【参考方案4】：

@media screen and (min-device-width: 767px) 
  .mobile display:none;

或

$('.mobile').toggle(parseInt($('body').width())>767);