我无法设置响应式菜单

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文件比断点更大，它会被显示。