1

我想要完成的事情很简单。假设您正在查看一个网站，然后您在 iPod Touch、小型平板电脑上查看它，或者您自己调整了浏览器的大小，但浏览器的宽度要么为 1024 像素或更低，并且 div 内的文本被填充在所有额外的内容。所以对我来说，基本构造的答案很简单。当浏览器达到 1024 像素或更低时隐藏文本。

我试过这个，但它似乎不起作用。这里有什么帮助吗？

$(window).resize(function(){
    if($(window).width() < 1024 ) {
        $('h2#head1').hide();}
    else {
        $('h2#head1').show();};
});
4

1 回答 1

2

在这种情况下，这是因为您的选择器已关闭（应该是 'h2 #head1' 或只是 '#head1'，而不是 h2#head1）。见http://jsfiddle.net/ERBKU/

但是，我还有其他一些观察：

  1. 在实际调整窗口大小之前，这不会处理，这意味着在加载时它不会被处理。因此，您需要在加载时加倍关注此逻辑。然而，这导致我第2点......
  2. 我认为结合一点 jQuery 和 CSS，你会得到更好的结果。我引用了 Modernizr 和早期 jQuery Mobile 中使用的方法。基本上，在加载和调整大小时，您想要检测视口宽度，如果它满足宽度阈值，则将特定的 CSS 选择器添加到html元素。如果满足阈值，此选择器可以影响目标元素的 CSS 属性。看到这个小提琴：http: //jsfiddle.net/b5LYq/1/这条路线的好处是您只需要一小段 jQuery，并且您可以通过在 CSS 中添加更多布局规则来轻松调整其他元素的显示属性。比维护一大块 jQuery 来操作页面以使其以您想要的方式显示要容易得多。此外，您可以添加额外的布局阈值，它仍然可以正常工作。
于 2012-05-01T04:32:07.960 回答