我無法設置響應式菜單

Question

我想設計響應式菜單。其實一切都很好。事實上我知道什麼是問題。但我無法修復它。另外，碼在這裏：該代碼在這裏：js fiddle

第一種情況是這樣的：

而第二個條件是這樣的：

當我點擊菜單這裏沒有問題，這是有效的。但是，如果我只使用一次，然後在調整屏幕大小後，菜單丟失，不會再來。我認爲問題在於，我關閉後打開菜單。在這裏，我在做顯示：無;但我無法修復它。

HTML：

<header> 
     <section id="menuBar"><h1> MENU </h1> <i class="fa fa-bars" aria-hidden="true"></i> </section> 
     <nav> 
      <ul> 
       <li><a href="#"> Hakkımda </a></li> 
       <li><a href="#"> Portfolyo </a></li> 
       <li><a href="#"> İletişim </a></li> 
      </ul> 
     </nav> 
</header> 

CSS：

header{ 
    background-color: #333; 
    width: 100%; 
    height: 50px; 
    box-shadow: 0 0 15px; 
    z-index: 555555555555555; 
    position: relative; 
} 

#menuBar{ 
    display: none; 
} 

header nav{ 
    text-align: center; 
} 

header nav ul{ 
    display: inline-block; 
    list-style-type:none; 
} 

header nav ul li{ 
    float: left; 
    padding: 15px; 
} 

header nav ul li a{ 
    color: white; 
    text-decoration: none; 
    font-family: roboto; 
    font-size: 17px; 
} 

@media (max-width:768px){ 

    section#menuBar{ 
     color: white; 
     font-family: roboto; 
     font-size: 20px; 
     display: block; 
     cursor: pointer; 

    } 

    section#menuBar h1{ 
     line-height: 50px; 
     display: inline-block; 
     margin-left: 25px; 
    } 

    section#menuBar i{ 
     float: right; 
     margin-top: 15px; 
     margin-right: 25px; 
    } 

    header nav{ 

     height: 152px; 
     width: 100%; 
     position: absolute; 
     display: none; 
     background-color: #333; 
    } 

    header nav ul{ 
     width: 100%; 
     margin-left: -45px; 
     position: relative; 

    } 

    header nav ul li{ 
     float: none; 
     padding-left: 0; 
     padding-top: 25px; 
     text-align: center; 
     display: block; 
     border-bottom:1px solid whitesmoke; 
     padding-bottom: 7px; 
     background-color: #333; 
     z-index: 444; 
    } 

    header nav ul li a{ 
     color: white; 

    } 

JQUERY：

$(function(){ 

    var width = $(window).outerWidth(); 
    $('#menuBar').click(function(){ 
     $('header nav').slideToggle(); 

     $('header nav ul li').hover(function(){ 
      $(this).addClass('aktif1'); 
      $('a',this).addClass('aktif2'); 
     },function(){ 
      $(this).removeClass('aktif1'); 
      $('a',this).removeClass('aktif2'); 

     }); 
    }); 
}); 

Answer 1

一種解決方案可以是您綁定調整事件的窗口，併爲您基於窗口的寬度的CSS 768px

$(window).resize(function() { 
    if($(window).outerWidth() > 767) 
     $('header nav').show(); 
    else 
     $('header nav').hide(); 
}); 

破發點，重置的CSS屬性display。

Answer 2

試試這個：

$(window).resize(function() { 
    if(!$('#menuBar').is(':visible') && !$('header nav').is(':visible')) { 
    $('header nav').show(); 
    } 
}); 

它檢查是否菜單欄是可見的，如果菜單本身是可見的，如果雙方不是這樣的，窗口是在CSS文件比斷點更大，它會被顯示。