當屏幕尺寸增加時，如何使動態下拉菜單消失

因此，我有一個下拉菜單的動態網站，應該只在屏幕寬度低於768px的寬度時出現。按鈕使菜單向下滑動不會出現，直到出現這種情況，菜單也不可見。然而，當我按下按鈕並且菜單關閉時，然後增加屏幕寬度時，菜單仍然可見。當屏幕尺寸增加時，如何使動態下拉菜單消失

這裏是按下按鈕時，我都用來做菜單滑動向下和向上jQuery的：

$(document).ready(function(){ 
var menu = $("#MobileMenuHolder") 

$('#menu-trigger').click(function(){ 

if (menu.is(":visible")) 
{ 
menu.slideUp(400); 
$(this).removeClass("open"); 
} 
else 
{ 
menu.slideDown(400); 
$(this).addClass("open"); 
}

我已經看過了幾個解決方案，但他們使整個事情無法工作。那麼當我增加屏幕寬度時，如何讓它消失？

任何幫助將不勝感激。

來源

2015-09-16 AlexW

你會使用$(window).resize()

$(window).resize(function(){ 
    var winW = $(window).width(); 
    if(winW <= 768){ 
     //Show the menu 
    } else { 
     //hide the menu 
    } 
});

來源

2015-09-16 20:28:07 ntgCleaner

非常感謝！這解決了這個問題。 – AlexW

使用CSS者優先考慮這樣的事情不是jQuery的

<style> 
    .open {visibility: hidden;} 
    @media screen and (max-width: 400px) { 
    .open {visibility:visible;} 
    } 
</style>

我希望這將做到這一點。

只需使用適當的班級名稱而不是open

來源

2015-09-16 20:35:37

當屏幕尺寸增加時，如何使動態下拉菜單消失

回答

相關問題