jquery - 変化するページ幅が960px未満の場合の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);