javascript - Jquery 菜单在移动浏览器中不起作用

Question

我有一个网站，我用过:

http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

作为我的导航。 然而，一切正常，但是当我缩小浏览器时，我尝试打开导航，但它没有打开。经过几个小时的调查，这个 Jquery 脚本存在问题。

        $(document).ready(function () {
        $('#mobileMenu').append('<div id="nav" role="navigation">' + $('#mainNav').html() + '</div>');
        $('#nav').append('<div style="position:absolute;top:0px; right:0px;"></div>');
        $('#mainNav').html('');
    }); 

关于我可能出错的地方的任何想法。

#nav 是打开菜单的类，但我的网站上需要此代码，但我认为我可能丢失了一些东西。

Answer 1

Javascript 处理菜单图标的点击:

$(window).on('resize', function() {
    if(jQuery(window).width() < 661) {
        $('#nav').find('.desktopNone').eq(0).unbind('click');
        $('#nav').find('.desktopNone').eq(0).on('click', function() {
            if($('#nav').find('ul').eq(0).css('display') == 'none') {
                $('#nav').find('ul').eq(0).show();
            } else {
                $('#nav').find('ul').eq(0).hide();
            }
        });
    } else {
        $('#nav').find('ul').eq(0).show();
    }
});

CSS 使其看起来不错:

media="all"
@media only screen and (max-width: 40em)
#nav > ul {
    height: auto;
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    background: #F1F1F1;
    z-index: 100;
}