1

ボタンがクリックされたときにメニューを表示/非表示にするこのコードがあります 

$('#main-menu ul').slideToggle();

ブラウザウィンドウが767ピクセル未満の場合、メニューは非表示になるため、このボタンが表示され、オンとオフを切り替えることができます。これは、ウィンドウのサイズを再度大きくした場合に、スライドするとメニューが消えるという唯一の問題を除いて機能します。トグルは、何も表示しないように設定しています。これを修正するために、ブラウザのサイズが変更されたときにメニューを表示するコードを追加しました。これにより、ブラウザウィンドウが再び767ピクセル未満に縮小されたときに、デフォルトが非表示になる代わりに、新しいメニューが表示されます。その後、767px未満に拡大縮小したときにメニューを再び非表示にできますが、これにより、非表示になっているためメニューがフラッシュされます。

この場合、resize（）がスケールアップしているかどうかを検出する方法を考えていました。この場合、スケールダウンするとhide（）メニューが表示され、スケールアップするとshow（）メニューが表示されます。

$('.menu-button').click(function() {
    $('#main-menu ul').slideToggle();
});



    $(window).resize(function(){
                var w = $(window).width();
                if(w > 767 && $('#main-menu ul').is(':hidden')) {
                    $('#main-menu ul').show();
                }
            });




    $(window).resize(function(){
                var w = $(window).width();
                if(w < 767) {
                    $('#main-menu ul').hide();
                }
            });
4

2 に答える 2

4

以前の寸法を保存し、それに基づいてサイズ変更によってサイズが増加するか減少するかを判断する必要があります。

jQuery(function($) {
    // Cache a reference to $(window), for performance, and get the initial dimensions of the window
    var $window = $(window),
        previousDimensions = {
            width: $window.width(),
            height: $window.height()
        };

    $window.resize(function(e) {
        var newDimensions = {
            width: $window.width(),
            height: $window.height()
        };

        if (newDimensions.width > previousDimensions.width) {
            // scaling up
        } else {
            // scaling down
        }

        // Store the new dimensions
        previousDimensions = newDimensions;
    });
});

ブラウザー ウィンドウのサイズが変更され、ユーザーがメニューを表示することを選択したときにメニューを表示したままにするには、ユーザーが表示することを選択したことを示すフラグを格納する必要があります。

$('.menu-toggle-button').click(function(e) {
    var $menu = $('#main-menu ul');

    if (!$menu.data('keepVisible')) {
        $menu
            .data('keepVisible', true); // Store the user's choice (show the menu)
            .slideDown(); // Show the menu
    } else {
        $menu
            .data('keepVisible', false); // Store the user's choice (hide the menu)
            .slideUp(); // Hide the menu
    }
});

$(window).resize(function() {
    var $menu = $('#main-menu ul');

    if ($(window).width() < 767) {
        // Window is smaller than 767 pixels wide
        if (!$menu.data('keepVisible')) {
            // Hide the menu if it hasn't been kept visible by the user
            $menu.hide();
        }
    } else if ($menu.is(':hidden') || $menu.data('keepVisible')) {
        Window is larger than 767 pixels wide and the menu is invisible OR has been shown manually by the user
        $menu
            .data('keepVisible', false) // Reset the user's choice
            .show(); // Show the menu
    }
);

(この手法では、ウィンドウが大きくなったか小さくなったかを判断するコード ブロックはまったく不要であることに注意してください)

于 2012-11-08T00:54:32.453 に答える
2

Kelvin Mackay が提供した答えは機能しますが、非常に単純なものに対して少し冗長ですか? スケールアップするかスケールダウンするかが問題になるのはなぜですか。本当に気になるのは 767 ピクセルという 1 つのポイントだけです。これが唯一の決定要因であり、実行する必要があるのは可視性を変更することだけです。

レスポンシブ UI の原則を使用している場合、ブラウザ ウィンドウのサイズを変更するのではなく、複数のデバイス間でレイアウトを処理することに実際に関係している場合、メニューを非表示/表示するためのボタンが必要なのはなぜですか。画面サイズに基づいて自動的に発生するはずです。

まず、ページがロードされたら、メニューの状態を判断する必要があります。次に、サイズ変更ハンドラーを用意するだけです (単に 2 つを組み合わせると、メニューが既に非表示になっているかどうかを心配する必要はありません)。

   $(window).resize(function(){
            var w = $(window).width();
            if(w > 767) {
                $('#main-menu ul').show();
            }
            else {
                $('#main-menu ul').hide();
            }
        });

編集：この回答から長い時間が経ちました。今これを行う場合は、このタイプのことを内部で行う必要がありますrequestAnimationFrame。

于 2012-11-08T01:10:21.770 に答える