导航栏消失Bug

Question

我正试图使导航菜单上的项隐藏，当该部分隐藏时。现在，我使用jQuery来移动和隐藏部分和媒体查询来隐藏和显示导航菜单项。我没有为导航栏使用html/css框架。这是我的HTML相关的导航部分：

<ul class="main-nav"> 
    <li><a href="#about">About</a></li> 
    <li class="music-link"><a href="#music">Music</a></li> 
    <li><a href="#tour">Tour</a></li> 
    <li><a href="#photos">Photos</a></li> 
    <li><a href="#contact">Contact</a></li> 
</ul> 

这是我的媒体查询：

@media only screen and (max-width: 767px), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 
    div .music-link { 
     display: none; 
    } 
} 

我现在的问题是有点难以解释，所以请让我知道这是不明确。当我打开并关闭导航栏的移动版本后，我的导航栏完全隐藏。这是我做的......

1. 刷新页面全屏
2. 调整屏幕宽度< 767px 开放
3. 移动导航马努（汉堡包图标）
4. 关闭移动导航菜单
5. 大小调整到更大的屏幕

5完成后，就根本没有导航菜单。这只是空白。关于发生什么的任何想法？如果您需要更多代码，请告诉我。有一个很好的数额，所以我试图限制它，我认为是相关的，我有点新来这个论坛。任何帮助将不胜感激。非常感谢！

编辑：这是我的相关代码这个问题休息...

导航CSS：

/* Main Nav */ 
.main-nav { 
    float: right; 
    list-style: none; 
    margin-top: 55px; 
} 

.main-nav li { 
    display: inline-block; 
    margin-left: 40px; 
} 

.main-nav li a:link, 
.main-nav li a:visited { 
    padding: 6px 0; 
    color: white; 
    text-decoration: none; 
    text-transform: uppercase; 
    font-size: 90%; 
    border-bottom: 4px solid transparent; 
    -webkit-transition: border-bottom 0.2s; 
    transition: border-bottom 0.2s; 
    z-index: 9999; 
} 

.main-nav li a:hover, 
.main-nav li a:active { 
    border-bottom: 4px solid #248dd1; 
} 

/* Mobile Nav */ 
.mobile-nav-icon { 
    float: right; 
    margin-top: 30px; 
    cursor: pointer; 
    display: none; 
} 

.mobile-nav-icon i { 
    font-size: 200%; 
    color: #fff; 
} 

/* Sticy Nav */ 
.sticky { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    background-color: rgba(0,0,0,0.8); 
    box-shadow: 0 2px 2px #efefef; 
    z-index: 9999; 
} 

.sticky .main-nav { margin-top: 10px } 

.sticky .main-nav li a:link, 
.sticky .main-nav li a:visited { 
    display: inline-block; 
    padding: 16px 0; 
    color: #248dd1; 
    border-bottom: 4px solid transparent; 
} 

.sticky .main-nav li a:hover, 
.sticky .main-nav li a:active { 
    border-bottom: 4px solid #248dd1; 
} 

.sticky .logo { display: none; } 
.sticky .logo-black { display: block; } 

媒体查询为导航：

@media only screen and (max-width: 767px), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) { 
    .mobile-nav-icon { display: inline-block; } 

    .main-nav { 
     float: left; 
     margin: 35px 15px 0 0; 
     display: none; 
    } 

    .main-nav li { display: block; } 

    .main-nav li a:link, 
    .main-nav li a:visited { 
     display: block; 
     border: 0; 
     padding: 10px 0; 
     font-size: 100%; 
    } 

    .sticky .main-nav { margin-top: 10px } 

    .sticky .main-nav li a:link, 
    .sticky .main-nav li a:visited { padding: 10px 0; } 
    .sticky .mobile-nav-icon { margin-top: 10px; } 
    .sticky .mobile-nav-icon i { color: #555; } 
    div .music-link { display: none; } 
} 

这是我的jQuery相关的导航栏：

$(document).ready(function() { 
    var $window = $(window); 
    var $pane = $('#pane1'); 

    function checkWidth() { 
     var windowsize = $window.width(); 
     if (windowsize < 647) { 
      //if the window is greater than 647px wide then turn on jScrollPane.. 
      $(".section-music").each(function() { 
       $(this).detach().insertAfter("body").css("display", "none"); 
      }); 
      $.scrollify.update(); 
     } 
     if (windowsize >= 647) { 
      //if the window is greater than 647px wide then turn on jScrollPane.. 
      $(".section-music").detach().insertAfter(".section-about").css("display", "block"); 
      $.scrollify.update(); 
     } 
    } 

    // Execute on load 
    checkWidth(); 
    // Bind event listener 
    $(window).resize(checkWidth); 


    // MOBILE NAVIGATION 
    $(".mobile-nav-icon").click(function() { 
     var nav = $(".main-nav"); 
     var icon = $(".mobile-nav-icon i"); 

     nav.slideToggle(200); 
     if(icon.hasClass("ion-navicon-round")) { 
      icon.addClass("ion-close-round"); 
      icon.removeClass("ion-navicon-round"); 
     } else { 
      icon.addClass("ion-navicon-round"); 
      icon.removeClass("ion-close-round"); 
     } 
    }); 
}); 

还有更多了一点，但它只能检测网页是否被查看某些类型的电话或在Internet Explorer中，我的网站的某些部分没有在IE浏览器...

这也是值得的如果我在小屏幕上打开移动导航并关闭它，但将其重新调整到更大的屏幕，我仍然可以看到完整的导航。只有当我关闭移动导航时，常规导航才会消失。

再次感谢！

Answer 1

当您调整屏幕大小或执行媒体查询时，它会将显示设置为无。但是当你回到其他屏幕尺寸时，没有查询将显示改回到屏蔽或你正在使用的任何东西。编写一个查询，以便在屏幕调整到正常状态时，将显示设置为可见。我可能是错的，但从你提供的信息来看似乎是最合理的。