1

我目前正在开发一个带有水平导航菜单的响应式网站，并切换到一个可点击的菜单图标，该图标可针对移动设备展开。菜单在桌面分辨率下看起来很好，在移动设备上也很好用。

如果我将浏览器缩小到分辨率断点以上，我的问题就会发生。它切换到移动菜单图标并隐藏我的标准菜单。如果我单击该图标，将显示菜单。再次单击它会消失。一切都很好。当我缩放浏览器备份时，如果我让移动切换可见并且如果我没有首先激活切换但如果我激活它，则关闭移动菜单，然后缩放备份，则将显示原始菜单，标准菜单保持切换隐藏方面并且永远不会再次出现。

据我所知，当我向上扩展超过媒体查询断点时，我需要 jquery 强制切换回可见。但我不知道该怎么做，我也没有在网上其他地方发现这个问题。

$("#menu-icon").on("click", function(){
        $("#nav").slideToggle();
        $(this).toggleClass("active");
    });

是我使用的功能：

<nav id="nav-wrap">
        <div id="menu-icon"><img src="../img/menu.png"></div>
        <ul id="nav">
        <li><a href="default.htm">Home</a></li>
        <li><a href="obstacles.htm">Obstacles</a></li>
        <li><a href="location.htm">Location</a></li>
        <li><a href="register.htm">Register</a></li>
        <li><a href="sponsor.htm">Sponsor</a></li>
        <li><a href="volunteer.htm">Volunteer</a></li>
        <li><a href="faqs.htm">FAQs/Documents</a></li>
        </ul>
        </nav>

是我的导航菜单和：

#nav {
    text-align:center;
    font-size:1em;
    text-transform:uppercase;
    font-weight:900;
    margin:1em auto;
    display:block;
}
#nav li {
    display:inline;
    text-align:center;
    margin:1em 2em;
}
#menu-icon {
    display:none;
}
@media screen and (max-width:600px) {
#menu-icon {
    width:30px;
    height:30px;
    cursor:pointer;
    display:block;
    margin:0em auto 1em auto;
}
#nav {
    clear:both;
    z-index:10000;
    padding:5px;
    background:#000;
    border:solid 1px #f1f1eb;
    display:none;
}
}

编辑：我忘了补充。我尝试通过使用具有不同 ID 的单独导航来解决此问题，当它缩小时会隐藏，但这有相反的问题，因为 jquery #导航将打开

4

1 回答 1

1

使用 window.resize 函数检查视口并添加$("#nav").show();

JS

$(window).resize(function() {
    //Add a set timeout to prevent resource hogging
    myWinWidth();
});

function myWinWidth() {
    var winWidth = $(window).width();
    console.log(winWidth);    
        if(winWidth > 600){
                 $("#nav").show();          
        }
    return false;
};

$("#menu-icon").on("click", function(){
        $("#nav").slideToggle();
        $(this).toggleClass("active");
    });

小提琴

http://jsfiddle.net/5DQs8/8/

于 2013-10-30T18:13:44.073 回答