jQuery 加载函数或 matchMedia 或 .css() 函数不起作用

Question

有人可以帮忙解释一下为什么下面的代码不起作用吗？我似乎无法弄清楚为什么......对我来说，一切都应该有效。

jQuery(window).load(function($){
    if (window.matchMedia("(min-width: 768px)").matches) { 
        var sideHeight = $('.mainContent').css('height');
        $('.sidebar').css('height', sideHeight);
    }
});

这是 CSS 部分的 jsfiddle，它可以工作。 https://jsfiddle.net/24r9cax6/

我已经通过在该函数中放置一个警报来测试媒体匹配部分，我可以让警报在 window.load 上弹出，但是 CSS 代码不起作用。我从来没有能够在我的网站上获得 CSS 代码到运行并使我的侧边栏与主要内容的高度相同。我把js放在了头部，和末尾的body。没有变化。

该站点是用 WP 构建的。内容是动态加载的，所以我认为它是在加载内容之前调整高度，但这就是 window.load() 应该解决的问题，对吧？

这是您可以查看的网站上的一篇文章。我希望侧边栏与 mainContent div 高度相同，这样灰色背景会继续向下延伸到页面下方。但仅限平板电脑尺寸及以上尺寸（使用 bootstrap）。

http://www.businesstransitionandexitplanning.com/turning-business-income-into-retirement-income/

Answer 1

您不能将 $ 传递给 .load() 并让它像将 $ 传递给 .ready() 时那样工作。您需要包装整个函数：

(function($){

    $(window).load(function(){
        if (window.matchMedia("(min-width: 768px)").matches) { 
            var sideHeight = $('.mainContent').css('height');
            $('.sidebar').css('height', sideHeight);
        }
    });

})(jQuery);

jQuery 加载函数或 matchMedia 或 .css() 函数不起作用

jQuery load function or matchMedia or .css() function not working

css

wordpress

jquery

matchmedia