[英]Wordpress mobile nav menu: menu appears on click on iPhone and other mobile devices, but not 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) 以及我的 Sony Z3 Compact Tablet (Lollipop) 上测试了您的网站(代码中的链接) http://bigdogpyro.geeksweet.com/ 。 我检查了本机浏览器、Firefox Mobile 和 Chrome。
移动菜单没有任何问题,效果很好。
您的问题是您的测试平台所独有的。 我建议您更改问题以反映您的测试平台。 你也可以谷歌平台特定的怪癖(IOS有很多)。
好的——我开始一个一个地策略性地停用 Wordpress 插件,看看它是否影响了任何东西——我通过停用一个名为“滚动上的粘性菜单(或任何东西!)”的插件来解决这个问题,该插件将元素粘贴到顶部滚动页面。
我不太确定它是如何影响菜单的,因此在点击时它不会出现(或者为什么它只发生在 iPad 上),但我很高兴我偶然发现了答案。
我打算删除我的问题,因为我不知道这个解决方案是否一定会帮助其他人,特别是因为我不太确定插件是如何搞砸的......但是,它给了我一条警告信息删除问题,所以我想我会留下足够的单独。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.