Question

我为客户开发了一个模板，该模板使用基于css媒体查询切换的非常基本的桌面/移动菜单系统。

我已经毫无困难地将这种方法用于其他几个网站，但是这个方法更加困难。实际上，在桌面环境中单击时，移动菜单会下拉，但在单击触发器时不会出现在移动环境中。

触发器基于JQuery，使用.click（）方法。

以下是该网站开发环境中的网站：dev.thinkswift.com

一些注意事项： 1. Jquery .click（）在移动环境中工作，有大量的例子。 2.函数IS触发，我尝试添加一个控制台日志以确保它执行得很好。

有什么想法吗？

Answer 1

在style.css（第130行）中尝试删除2行：

#top-nav {
    position:fixed;
    z-index:999;
    top:0px;
    left:0px;
    font-family: 'Roboto Condensed', sans-serif;
    /* overflow:hidden; */
    /* height:50px; */
    box-shadow:0px 2px 4px rgba(0,0,0,0.3);
    background:#fff;
}

限制50px的高度为菜单制作了一个薄视口。父级的固定高度不允许子容器（#mobile-menu-dropdown）扩展其父级（#top-nav）。

显示/隐藏菜单的jquery代码看起来有点笨拙。你可以缩短它。这样：

$('#mobile-menu-toggle').click(function(){
    if ( $('#mobile-menu-dropdown').is(':visible')) {
        $('#mobile-menu-dropdown').hide();       
    } else {
        $('#mobile-menu-dropdown').show();
    }
});

可以替换为

$('#mobile-menu-toggle').click(function(){
        $('#mobile-menu-dropdown').toggle();
});

没有丢失功能。

JQuery Mobile菜单仅在桌面上工作

1 个答案: