jquery - 移动设备上的下拉导航

Question

我公司使用专有的CMS开发网站，我们对移动开发的适应能力很差。我们开发特定于移动设备的网站，但我们不会免费提供它们。不管怎样，我们的大多数网站都使用带有无序列表的水平导航，当父元素悬停在上面时，子菜单就会出现。这在桌面设备上很好，但在移动浏览器上不起作用。子菜单出现，但它们的功能就好像它们是透明的，点击子元素无处可去 - 或者更糟，转到子菜单后面的链接。

我能够编写一个简短的 jQuery 脚本(我是 jQuery 的初学者)，如果单击父链接，它会强制子菜单保持可见。它有效，但不是在第一次点击时 - 在第一次点击时，浏览器会尝试启动移动悬停仿真(？)并立即在屏幕上闪烁子菜单。然后第二次单击将打开子菜单，此时子菜单功能齐全，或者可以通过单击其他地方关闭。这显然不理想。

这是 jQuery 脚本。如果 a 元素有 .dropper 类，它将有一个 ul 作为它的下一个兄弟，这就是选择器的工作方式。

$(function() {
     $('a.dropper').click(function(){
          $(this).next().toggle();
     });
});

希望有人知道我可以使用相同的 HTML 和 CSS 让这些菜单在桌面和移动浏览器上工作的方法。不幸的是，媒体查询可能无法在我们的系统中实现。显然，我宁愿摆脱这种导航，而设计更具响应性，但这是另一天的另一个问题。

我一直在最近的 Android 设备上使用 Chrome 作为我的移动测试环境，但任何解决方案都应该也适用于 iPhone。

Answer 1

无论如何，媒体查询可能不是正确的想法。更好的方法是在服务器端检测设备，然后返回为移动设备量身定制的不同版本的内容。如果你有这个选项，那么从移动优先开始也更容易。媒体查询有点奇怪，因为移动浏览器将加载所有内容，从而使网站加载缓慢，加载成本高，因为它将加载桌面网站的所有内容(这会大得多，但会针对较小的屏幕格式化该内容。

媒体查询更多的是关于根据不同的设备或不同大小的浏览器窗口调整站点大小......而不是关于防止太多内容被加载到设备......这就是用户代理检测的目的。