jquery - 改变当页面宽度小于 960 像素时，jquery 的高度

Question

当页面宽度小于960px时如何使用jquery改变元素的高度

这是我尝试过的：

$(document).ready(function() {

if ( $(window).width() < 960) {
    $('menu').animate({height:'60px'});
}
else {
    $('menu').animate({height:'40px'});
}

});

但它仅在您刷新页面时才有效，并且我希望它在页面加载后重新调整页面大小时工作。

Answer 1

 $('menu').animate({height:'60px'});
    ^^^^
 here is the error if menu is `id` than should be `#menu` if `class` than `.menu`

菜单标签浏览器支持

Answer 2

您需要发布 HTML 以确保，但$('menu')通常不是有效的选择器，它将匹配<menu>. 更有可能它是一个类或 id - 如果它是一个类，它应该是$('.menu')，如果它是一个 ID，它应该是$('#menu')

要在调整页面大小时运行，请将代码包装在resize()方法中 - http://api.jquery.com/resize/

// resize menu depending on page width
function do_resize(){
    if ( $(window).width() < 960) {
        $('menu').animate({height:'60px'});
    } else {
        $('menu').animate({height:'40px'});
    }
}
// resize menu on initial page load
$(document).ready(do_resize);
// resize menu when page is resized
$(window).resize(do_resize);