我的公司使用专有的 CMS 开发网站，我们适应移动开发的能力很差。我们开发特定于移动设备的网站，但我们不会免费赠送它们。无论如何，我们的大多数网站都使用带有无序列表的水平导航，当父项悬停在其中时，子菜单会出现。这在桌面设备上很好，但在移动浏览器上不起作用。子菜单出现了，但它们的功能就好像它们是透明的，点击子项目无处可去 - 或者更糟的是，转到子菜单后面的链接。
我能够编写一个简短的 jQuery 脚本（我是 jQuery 的初学者），如果单击父链接，它会强制子菜单保持可见。它可以工作，但在第一次单击时不起作用 - 在第一次单击时，浏览器会尝试启动移动悬停仿真（？）并在屏幕上瞬间闪烁子菜单。然后再次单击将打开子菜单，此时子菜单功能齐全，或者可以通过单击其他位置关闭。这显然不理想。
这是 jQuery 脚本。如果 a 元素有 .dropper 类，它将有一个 ul 作为它的下一个兄弟，这就是选择器的工作方式。
$(function() {
$('a.dropper').click(function(){
$(this).next().toggle();
});
});
希望有人知道一种方法，通过该方法我可以使用相同的 HTML 和 CSS 使这些菜单在桌面和移动浏览器上工作。不幸的是，媒体查询可能无法在我们的系统中实现。显然，我宁愿摆脱这种导航，并且设计得更具响应性，但这是另一天的另一个问题。
我一直在最近的 Android 设备上使用 Chrome 作为我的移动测试环境，但任何解决方案都应该在 iPhone 上运行。