JQuery 移动菜单仅在桌面上工作答案

【问题标题】：JQuery Mobile Menu Working Only On DesktopJQuery 移动菜单仅在桌面上工作
【发布时间】：2015-02-16 11:21:36
【问题描述】：

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

我已经在其他几个网站上毫无困难地使用了这种方法，但事实证明这个方法更难。本质上，移动菜单在桌面环境中点击时会下拉，但在点击触发器时不会出现在移动环境中。

触发器基于 JQuery，使用 .click() 方法。

这是它的开发环境中的站点：dev.thinkswift.com

几点说明： 1. Jquery .click() 确实可以在移动环境中工作，这方面的例子很多。 2. 函数正在触发，我尝试添加控制台日志以确保它执行得很好。

有什么想法吗？

【问题讨论】：

移动菜单确实下拉，但它在 div id='main' 后面。如果您将display: none 设为#main，则可以看到它。 z-index 和不透明度的更改不会影响。尝试检查this document
感谢您确定这一点。您链接到的文档说我正确设置了绘制顺序，所以发生这种情况很奇怪。如果 z-index、不透明度等不会影响它，我怎么可能让它在移动设备上正常工作？
看来我找到了原因。阅读答案

标签： javascript jquery css mobile

【解决方案1】：

在 style.css (line: 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;
}

在高度限制为 50 像素的情况下，您为菜单创建了一个薄视口。父级的固定高度不允许子容器 (#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();
});

不会丢失功能。

【讨论】：

非常感谢您对此进行调查。很奇怪，溢出只适用于移动环境。向您致敬，先生！