Wordpress 移动导航菜单:菜单出现在 iPhone 和其他移动设备上,但不是 iPad



我试图弄清楚为什么这个响应式菜单在iPhone和其他平板电脑上可以正常工作,但在iPad上却不能。在手机上,单击菜单图标时,菜单已激活并正确下拉。但是,在iPad上,单击菜单图标时不会发生任何反应。

这是相关的 html:

<a href="#" class="nav-toggle" aria-hidden="false">Menu</a>
<nav id="nav" class="nav-collapse closed" aria-hidden="true" style="transition: max-height 250ms; position: absolute;">
  <ul id="topnav" class="menu"><li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-7 current_page_item no-children menu-item-104">
    <a href="http://bigdogpyro.geeksweet.com/">Home</a></li>
   ...
  </ul></nav>
当通过

浏览器开发人员工具(通过切换设备模式)查看时,作为手机,当单击菜单图标时,它会将 ul 标签中的"关闭"类更改为"打开"(然后出现下拉菜单),但是,作为平板电脑,类不会改变。(我正在使用开发人员工具在Mac上的Chrome中对此进行测试 - 它通常在平板电脑上显示此问题,尽管问题似乎是iPad特有的。

所以,我猜这是一个javascript问题,但我不确定如何从这里进行故障排除 - 我对javascript的处理不是那么好,并且Wordpress主题中的源javascript文件被缩小并且难以解析。

但是,如果有帮助,以下是页面页脚中包含的脚本:

<script>
    var navigation = responsiveNav(".nav-collapse", { 
        label: "Menu", // String: Label for the navigation toggle
        insert: "before", // String: Insert the toggle before or after the navigation
    });
</script>
<script>jQuery(document).ready(function($)   
{$('.expander').simpleexpand({'defaultTarget': '.sub-menu'});});

有谁知道为什么会发生这种情况?

我刚刚在我相当旧的三星Tab 7.0(Jellybean)以及我的索尼Z3紧凑型平板电脑(棒棒糖)上 http://bigdogpyro.geeksweet.com/测试了您的网站(代码中的链接)。我检查了本机浏览器,Firefox Mobile和Chrome。

移动菜单没有任何问题,效果很好。

您的

问题是您的测试平台独有的问题。我建议您更改问题以反映您的测试平台。你也可以谷歌平台特定的怪癖(IOS有很多)。

好的 - 我

开始战略性地逐个停用 Wordpress 插件,看看它是否影响了任何东西 - 我通过停用一个名为"粘性菜单(或任何内容!在滚动"上,它会在您滚动时将元素粘贴到页面顶部。

不太确定它如何影响菜单,以便在单击时不会出现(或者为什么它只发生在iPad上),但我很高兴我偶然发现了答案。

打算删除我的问题,因为我不知道这个解决方案是否一定会帮助其他人,特别是因为我不太确定插件是如何搞砸事情的......但是,它给了我一个关于删除问题的警告信息,所以我想我就不管了。

最新更新