響應式菜單消失在窗口調整大小

Question

我是一個新手腳本，但一直試圖找到一個解決方案，適合我的響應菜單解決方案。我見過其他有類似問題的人，但他們似乎在爲他們的菜單使用不同的方法。

這裏是我的代碼：

HTML：

function toggle_visibility(id) { 
 
    var e = document.getElementById('menu-items'); 
 
    if ($(e).css('display') == 'block') { 
 
    $(e).slideUp('fast'); 
 
    } else { 
 
    $(e).slideDown('fast'); 
 
    } 
 
};

.mobile-menu { 
 
    display: none 
 
} 
 

 
@media only screen and (max-width: 680px) { 
 
    #menu-items { 
 
    display: none 
 
    } 
 
    .mobile-menu { 
 
    display: block; 
 
    cursor: pointer; 
 
    } 
 
}

<a onclick="toggle_visibility('menu-items');" class="mobile-menu">Menu</a> \t 
 

 
<div id="menu-items"> 
 
    <a href="#">Link</a> 
 
    <a href="#">Link</a> 
 
    <a href="#">Link</a> 
 
    <a href="#">Link</a> 
 
    <a href="#">Link</a> 
 

 
</div> 
 
<!--#menu-items-->

菜單的偉大工程，但我遇到的主要問題是，當用戶減小窗口大小顯示響應菜單切換，然後使用切換打開然後關閉菜單，當窗口重新調整到桌面視圖時，菜單永遠不會返回到正常視圖。

奇怪的是，如果用戶在移動視圖中打開響應菜單並將其調整回桌面，但在用戶關閉菜單時不會返回。

我喜歡在這個菜單上工作的唯一的其他事情是，如果用戶點擊頁面中的其他任何地方，但菜單，菜單關閉。目前用戶必須點擊菜單切換鏈接關閉它。

任何幫助將非常感謝！

非常感謝。

Answer 1

試試這個：

@media only screen and (min-width: 680px) { 


#menu-items { 
    display: block 
    } 
    .mobile-menu { 
    display: none; 
    cursor: pointer; 
    } 

} 

Answer 2

使用效果基本show（）和了slideDown（）這裏是一個小技巧，因爲他們建立/刪除內嵌樣式 '顯示：無;'當您調整窗口大小時，它不會被刪除。這就是菜單不再出現的原因：隱藏菜單的內聯樣式仍處於活動狀態。

你需要做的是使用類做處理在不同的設備寬度的顯示，並添加掛鉤，效果基本show的完整的回調：（JSFiddle）

CSS：

.mobile-menu { 
    display: none 
} 

@media only screen and (max-width: 680px) { 
    #menu-items { 
     display: none 
    } 
    .mobile-menu { 
     display: block; 
     cursor: pointer; 
    } 
    .collapsed { 
     display: none; 
    } 
} 

@media only screen and (min-width: 681px) { 
    .collapsed { 
     display:block; 
    } 
} 

JS：

function toggle_collapsed_class(e) { 
    $(e).css('display', '').addClass('collapsed'); 
}; 

function toggle_visibility(id) { 
    var e = document.getElementById('menu-items'); 
    if ($(e).css('display') == 'block') { 
     $(e).slideUp('fast', function(){ 
      toggle_collapsed_class(e) 
     }); 
    } else { 
     $(e).removeClass('collapsed').slideDown('fast'); 
    } 
};