首页 文章

Jquery切换移动菜单,在调整桌面大小时可能会将其关闭

提问于
浏览
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的单独导航来解决这个问题,该导航在缩小时会隐藏,但是存在相反的问题,其中一半的时间我缩放并且有2个导航菜单,因为jquery#导航将被切换

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/

相关问题