检查页面宽度然后在 jquery 中应用 css

Question

我正在尝试让 jQuery 检查调整大小时的 window 宽度。如果 window 大于 960px，我想将 display: block; 内联样式应用于 class .main-navigation。这是我目前所拥有的，但我无法正确理解语法。

jQuery(window).resize(function($) {
  if ($(window).width() < 960) {
     document.getElementByClass(".main-navigation").style.display = 'block';
  }
 else {}
});

Answer 1

你的语法有点不对，你将原生 JS 与 jQuery 选择器组合在一起，而 getElementByClass 函数不存在（除非你自己创建），试试这个:

$(window).resize(function($) {
    if ($(this).width() > 960) { // note: greater than operator
        $(".main-navigation").css('display', 'block');
    }
}

更好的是，您可以为此目的使用 CSS 媒体查询，因为这正是它们的发明目的：

@media (min-width: 960px) {
    .main-navigation {
        display: block;
    }
}

检查页面宽度然后在 jquery 中应用 css

Check page width then apply css in jquery

jquery

if-statement

resize