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;
    }
}

我目前的问题有点难以解释，所以如果不清楚，请告诉我。打开并关闭导航栏的移动版本后，我的导航栏在调整大小时完全隐藏。这就是我做的......

全屏刷新页面
将屏幕大小调整为宽度＆lt; 767px 打开
移动导航手册（汉堡图标）
关闭移动导航菜单
调整大屏幕

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

编辑：以下是此问题的其他相关代码......

nav 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上工作...

再次感谢！

Navbar消失Bug

0 个答案: