導航欄消失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

當您調整屏幕大小或執行媒體查詢時，它會將顯示設置爲無。但是當你回到其他屏幕尺寸時，沒有查詢將顯示改回到屏蔽或你正在使用的任何東西。編寫一個查詢，以便在屏幕調整到正常狀態時，將顯示設置爲可見。我可能是錯的，但從你提供的信息來看似乎是最合理的。