當窗口大小調整時，Navbar不會切換

Question

我已創建了一個粘貼到頁面的側導航欄切換菜單。問題是當我調整我的窗口屏幕時，除非頁面滾動到頂部，否則它不會切換。

HTML

<i class="fa fa-bars fa-2x nav-toggle"></i> 
    <nav class="main-navigation"> 
    <ul class='nav-links'> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#about">About</a></li> 
    <li><a href="#skills">Skills</a></li> 
    <li><a href="#portfolio">Portfolio</a></li> 
    <li><a href="#contact">Contact</a></li> 
    </ul> 
    </nav> 

CSS

.main-navigation { 
position: fixed; 
top:0; 
left:0; 
width: 100px; 
height: 100px; 
text-align: center; 
transform: translateY(-210%); 
transition: transform 0.6s ease; 
} 

.main-navigation.open { 
transform: translateY(50%); 
} 

JS

$('.nav-toggle').on('click', function(){ 
    $('.main-navigation').toggleClass('open'); 
}); 

Answer 1

HTML：

<i class="fa fa-bars fa-2x nav-toggle"></i> 
    <nav class="open"> 
    <ul class='nav-links'> 
    <li><a href="#home">Home</a></li> 
    <li><a href="#about">About</a></li> 
    <li><a href="#skills">Skills</a></li> 
    <li><a href="#portfolio">Portfolio</a></li> 
    <li><a href="#contact">Contact</a></li> 
    </ul> 
    </nav> 

CSS：

.open { 
position: fixed; 
top:0; 
left:0; 
width: 100px; 
height: 100px; 
text-align: center; 
transform: translateY(-210%); 
transition: transform 0.6s ease; 
} 

.open.toggle { 
transform: translateY(50%); 
} 

JQUERY：

<script type="text/javascript"> 
var width = $(window).width(); 
if(width < 768){ 
    $(".nav-toggle").click(function(){ 
    $(".open").toggle(); 
    $(".open").toggleClass("toggle"); 
    }); 
} 
</script> 

Answer 2

這是你正在尋找的代碼：

$(window).resize(function(){ 
if(window.width() < YOUR PREFERENCE) { 

Insert your toggle code here 

} 
});