【问题标题】:Wordpress mobile nav menu: menu appears on click on iPhone and other mobile devices, but not iPadWordpress 移动导航菜单:点击 iPhone 和其他移动设备时出现菜单,而不是 iPad
【发布时间】:2016-03-24 23:16:36
【问题描述】:

我试图弄清楚为什么这个响应式菜单可以在 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'});});

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

【问题讨论】:

    标签: javascript css wordpress ipad responsive-design


    【解决方案1】:

    我刚刚在我相当旧的 Samsung Tab 7.0 (Jellybean) 和 Sony Z3 Compact Tablet (Lollipop) 上测试了您的网站(代码中的链接)http://bigdogpyro.geeksweet.com/。我检查了原生浏览器 Firefox Mobile 和 Chrome。

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

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

    【讨论】:

    • 我的客户坚持认为它不能在 iPad 上运行——而且,在我的测试环境中,它不能在平板电脑上运行,所以我认为它通常是平板电脑。不过,现在看来它是特定于 iPad 的(它在我的 iPhone 上运行良好)。我会看看我是否可以更改问题 - 感谢您的澄清!
    【解决方案2】:

    好的——我开始策略性地一个一个地停用 Wordpress 插件,看看它是否会影响任何东西——我通过停用一个名为“滚动上的粘滞菜单(或任何东西!)”的插件解决了这个问题,该插件将元素粘贴到滚动时的页面顶部。

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

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

    【讨论】:

    • 由于您能够将问题归因于特定插件,并且您描述了您的过程 - 我建议您将自己的答案标记为正确答案并将您的问题留在这里。其他人会发现您的 Q+A 很有帮助。
    猜你喜欢
    • 1970-01-01
    • 2018-04-16
    • 1970-01-01
    • 1970-01-01
    • 2017-04-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多