0

我正在尝试使用媒体查询来禁用特定浏览器宽度的浮动。此 if 语句仅在我重新加载当前大小的页面时才有效。当 CSS 属性更改时，是否可以让 jQuery 应用更改？

if($('.two-column li').css('float') == 'left') {
    $('.two-column li').equalHeights();
}

我可能应该在第二个 $('.two-column li') 上使用 $(this) 或其他东西，但我不知道为什么它不起作用。我对jQuery不太了解。

编辑：

默认情况下，两列 li 的样式类似于

.two-column li {
    float: left;
}

然后让我们说...

@media only screen and (max-width: 767px) {
    .two-column li {
        float: none;
    }
}

这确实有效。当宽度低于 767px 时，它会停止浮动。我上面的丑陋 jquery 似乎部分工作。默认情况下，equalheights 插件会运行，但当宽度低于 767px 时，插件不会运行。我的问题是它是否运行取决于加载页面时浏览器的大小。我试图让它像响应式设计中的媒体查询一样动态。

我在准备好文件时调用它。

在更多研究和下面的评论的帮助下，现在就像这样，包括准备好的文档……虽然在调整大小时仍然没有这样做，需要刷新。

$(document).ready(function () {
    $('.two-column li').filter(function(index) {
        return $(this).css('float') != 'none'
    }).equalHeights();
});
4

4 回答 4

1

modernizr 提供媒体查询测试。此外，您还可以将事件处理程序附加到$(window).resize()

于 2011-06-20T03:27:55.027 回答
0

您粘贴的示例代码有点偏离，它不会像您期望的那样。您需要做的就是选择所有要操作的元素，然后根据它们的浮动样式的值对其进行过滤。然后，在过滤后，将您想要的操作应用于过滤后的集合。例如，如果你想在所有浮动设置为“left”的“.two-column li”元素的集合上运行 equalHeights 插件，请尝试以下代码：

$('.two-column li').filter(function(index) {
    if($(this).css('float') == 'left') return true;
}).equalHeights();

话虽如此，听起来问题的根源在于调整浏览器大小时未正确激活 CSS 媒体查询。您能否发布您的媒体查询代码，看看是否有更简单的解决方案？

于 2011-06-20T03:30:41.733 回答
0

您可以使用$(window).resize()

$('div#first').addClass("right");

$(window).resize(function() {

    $('#first').toggleClass("right", $(this).width() > '500');

});
  1. 确保使用div获取类float，因此将其添加到 resize 函数之外。
  2. 调整窗口大小时，根据窗口大小打开或关闭类（即浮动或不浮动）。在这种情况下，当窗口大于 500 像素时会发生切换。相反，当它更小时，该类被删除。
  3. 将宽度设置为您喜欢的任何值。

http://jsfiddle.net/jasongennaro/7qc8e/3/

调整窗口大小以使其正常工作。

于 2011-06-20T04:30:19.357 回答
0

好的..所以经过更多的研究和一些摆弄，我似乎拥有我想要的功能。我无法编写正确的 jQuery 代码，有人可以告诉我我做错了什么以使其更优雅吗？

var $float = $('.two-column li');
$float.filter(function(index) {
    return $(this).css('float') != 'none'
}).equalHeights();
$(window).resize(function () {
    $float.filter(function(index) {
        if ($(this).css('float') != 'none') {
            $float.equalHeights();
        }
        else {
            $float.height('auto');
        }
    });
});
于 2011-06-20T19:29:06.797 回答