0

クリックすると開閉する非常にシンプルなナビゲーションメニューがあります。メニューの動作は、ブラウザのビューポートが特定のサイズを下回っている場合にのみ機能します。

それはすべて、90％の時間でうまく機能します。残りの10％の時間（クライアントにデモンストレーションしているときは、ナッチ）をクリックイベントはまったく発生しません。私の知る限り、この問題はブラウザのサイズが数回変更された後にのみ発生しますが、通常はウィンドウのサイズが変更されたときに正常に機能するため、発生した理由を突き止めるのは困難です。

コード：

var smallViewport = false;

$(document).ready(function(){
    if($(window).width() < 520) {
        smallViewport = true;
    } 

    if(smallViewport == true) {
        $('nav.main').click(function(){
            console.log(' + clicky clicky');
            if($(this).find('.level-1').hasClass('open') == true) {
                $(this).find('.level-1').slideUp('fast').removeClass('open');
            } else {
                $(this).find('.level-1').slideDown('fast', function(){ $(this).addClass('open'); });
            }
        })
    }
});

$(window).resize(function() {

    if($(window).width() < 520) {
        smallViewport = true;
    } else {
        smallViewport = false;
    }
    console.log(smallViewport);

    if(smallViewport == true) {
        $('.level-1').removeClass('open').css('display','none');
    } else {
        $('.level-1').css('display','block');
    }

});

問題が顕在化することを選択した場合、サイズ変更関数のconsole.log（smallViewport）は、trueである必要があるときに「true」を出力し、クリックイベントはそれと一緒に発生することを拒否します。

誰かが以前に同様の問題に遭遇したことがありますか？私が見逃している明らかな解決策はありますか？

4

2 に答える 2

2

ページがサイズ変更されたときではなく、ページが読み込まれたときにのみクリックをバインドします

ページの読み込み時にfalseと評価された場合$(window).width() < 520、クリックイベントはバインドされません。これが、コンソールログは正しいが、イベントが発生しない理由です。

于 2012-10-19T11:35:48.253 に答える
2

クリック イベント ハンドラー内にビューポート チェックを配置します。現在のように、ページの読み込み時にチェックが false と評価された場合、イベント ハンドラーはバインドされません。これを次のように変更してみてください。

$('nav.main').click(function(){
    if(smallViewport == true) {
        console.log(' + clicky clicky');
        if($(this).find('.level-1').hasClass('open') == true) {
            $(this).find('.level-1').slideUp('fast').removeClass('open');
        } else {
            $(this).find('.level-1').slideDown('fast', function() {
                $(this).addClass('open'); 
            });
        }
    }
}​);​
于 2012-10-19T11:44:05.497 に答える