応答メニューを設定できません

Question

応答メニューを設計したいと思います。実際はすべて大丈夫です。事実、私は何が問題なのか知っています。しかし、私はそれを修正することはできません。また、コードはここにある：コードはここにある：js fiddle

最初の条件のように：このような

そして、第二の条件：私はメニューに

クリックここに問題はない、それは仕事だ。しかし、私が1回だけ使用すると、画面のサイズを変更した後、メニューが失われ、再び表示されません。私は問題は、私はそれを閉じた後にメニューを開くと思います。ここでは、私は表示しています：なし;しかし、私はそれを修正することはできません。

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

一つの解決策は、あなたがバインドあなたのウィンドウにイベントのサイズを変更し、ウィンドウの幅に基づいて768px

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

のCSSのブレークポイントをチェックし、CSSプロパティdisplayをリセットすることもできます。

Answer 2

これを試してみてください：

のmenuBarが表示されているとの両方が当てはまらない場合は、メニュー自体は、表示されている場合、ウィンドウはCSSファイルでブレークポイントよりも大きいですし、それがするかどうか調べ

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

示される。