基於實時媒體查詢的jQuery變量

我正在創建一個基於CSS3媒體查詢的響應式設計的網站（lessframework）。我正在使用的導航顯示懸停下拉菜單，但當屏幕大小調整並進入iPad或移動視圖時，我需要導航才能更改爲onclick，此時刷新頁面後可以正常工作，但不會在調整大小後立即生效這一頁。基於實時媒體查詢的jQuery變量

我需要的是代碼更改爲.live()什麼的，所以頁面不必刷新窗口的大小調整。

下面的代碼：

if ($('body').css('width') === '992px') { 
    $('#nav li').hover(function() { 
     //show its submenu 
     $('ul.sub', this).stop().slideDown(100); 
    }, function() { 
     //hide its submenu 
     $('ul.sub', this).stop().slideUp(100); 
    }); 
    //sub sub menu 
    $('#nav ul li').hover(function() { 
     $('ul', this).stop().slideDown(100); 

    }, function() { 
     $('ul', this).stop().slideUp(100); 
    }); 
} else { 

    $("ul.sub2>li").click(function() { 

     return false; 
    }); 
    $("ul.sub>li").click(function() { 

     return false; 
    }); 
    $("ul.sub>li:has(ul.sub2)").click(function() { 

     $('.sub2').slideUp(); 
     $("ul.sub2", this).slideDown(); 
     return false; 
    }); 

    $("ul#nav>li:has(ul.sub)").click(function() { 
     $('.sub').slideUp(); 
     $('.sub2').slideUp(); 
     $("ul.sub", this).slideDown(); 
    }); 


} 
});

來源

2012-09-23 user1692191

，而不是這個'如果（$（ '身體'）的CSS（ '寬'）=== '992px'）{'你應該可能使用'$（window）.width（）'代替。 – endyourif

調整大小是你應在窗口對象，以便能夠做的事情的窗口大小改變時聽jquery的事件。例如，如果寬度是「ipad寬度或不是」，那麼您可以在變量存儲器上更新窗口大小。

var ipad_width = $(window).width() < 992; //ipad_width => true || false 

$(window).on('resize', function() { 
    ipad_width = $(window).width() < 992 
});

爲了避免在每次調整瀏覽器，我認爲一個簡單的解決辦法是結合從一開始的所有事件，有時間約束越來越多的活動的，如果應該只是在執行綁定函數中的語句ipad視圖或不在ipad視圖中。作爲一個例子：

$("ul.sub2>li").click(function() { 
    if (ipad_width) { 
     return false; 
    } 
});

和：

$('#nav li').hover(function() { 
    if (!ipad_width) { 
     //show its submenu 
     $('ul.sub', this).stop().slideDown(100); 
    } 
}, function() { 
    if (!ipad_width) { 
     //hide its submenu 
     $('ul.sub', this).stop().slideUp(100); 
    } 
});

來源

2012-09-23 19:02:13

基於實時媒體查詢的jQuery變量

回答

相關問題