ハンバーガーを閉じた後、大きなデバイスにメニューを表示

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(); 
}); 

一度閉じ、ディスプレイ：どれも、それはdoesntの理由がある、それに適用されません現れる。別のオプションは、display：block！を追加することです。重要;メディアのクエリで画面の最小幅767px