汉堡包关闭后在较大的设备上显示菜单

Question

我是初学者，需要一些建议。我试图建立汉堡菜单和我的菜单，通过关闭按钮关闭后，当我将屏幕调整为更大的分辨率时，不会显示。有人可以帮助我吗？下面是代码：

<header class="page-header"> 
    <div class="logo-wrapper"> 
    <i class="fa fa-superpowers" aria-hidden="true"></i> 
    </div> 
    <button class="menu-open">O</button> 
    <button class="menu-close">X</button> 
    <nav class="nav-bar"> 
    <ul class="nav-list"> 
     <li class="nav-item">Home</li> 
     <li class="nav-item">About</li> 
     <li class="nav-item">Projects</li> 
     <li class="nav-item">Contact</li> 
     <li class="nav-item">Sign up</li> 
    </ul> 
    </nav> 
</header> 

CSS：

.page-header { 
    position: relative; 
    background-color: #FFFFFF; 
} 

.logo-wrapper { 
    padding: 20px; 
} 

.menu-open { 
    position: absolute; 
    top: 0; 
    right: 15px; 
} 

.menu-close { 
    position: absolute; 
    top: 0; 
    right: 15px; 
} 

.nav-bar { 
    text-align: center; 
    display: none; 
} 

.nav-list { 
    list-style: none; 
    padding: 0; 
} 

.nav-item { 
    padding: 12px 0; 
    border-bottom: 1px solid #FAFAFA; 
} 

/*---MEDIA QUERIES---*/ 

    @media screen and (min-width: 768px) { 
    button { 
    display: none; 
    } 

    .page-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    } 

    .nav-bar { 
    display: block; 
    } 

    .nav-item { 
    display: inline-block; 
    padding: 10px 15px; 
    } 
} 

的Jquery：

$(document).ready(function(){ 

     $(".menu-close").hide(); 

     $(".menu-open").click(function() { 
    $(".nav-bar").slideToggle("slow", function() { 
     $(".menu-open").hide(); 
     $(".menu-close").show(); 
    }); 
    }); 

     $(".menu-close").click(function() { 
    $(".nav-bar").slideToggle("slow", function() { 
     $(".menu-close").hide(); 
     $(".menu-open").show(); 
    }); 
    }); 
}); 

Answer 1

$(window).on("resize", function(event){ 
if($(this).width() > 767){ 
$('.nav-bar').show(); 
}); 

一旦闭合，显示：没有将应用到它，这就是为什么它不出现。另一个选择是添加显示：块！重要;在媒体查询屏幕最小宽度767px