javascript - 在鼠标悬停时打开/关闭导航，在移动设备上触摸？

Question

我的导航是一个固定在屏幕顶部的短栏。如果您将鼠标悬停在它上面，它会展开以向您显示菜单选项，如果您退出它，它会折叠起来。这在桌面上效果很好（实际上甚至是现代 Android 设备，您可以在导航内部单击以将其打开，然后在外部单击以将其关闭）。在 iOS 设备上，触摸导航会打开它，但在导航外部触摸不会关闭它，除非在一些奇怪的情况下，比如触摸图像。

我可以重写导航，让它在点击时打开/关闭，但在桌面上感觉很笨拙。让它在悬停时打开和关闭感觉更容易被发现和活泼。

你们有没有遇到过这种情况？是否有可能让它在移动设备上以不同的方式工作？应该是？

Answer 1

有几种方法可以解决这个问题 - 这是最快（最黑客）的一种：

创建一个隐藏的输入（或者如果您一直在您的页面上，您可以使用常规输入）。监听 body 上的“touchstart”事件 - 如果目标在您的导航元素内，您可以忽略它，否则，同时聚焦和模糊该输入元素。这将从您的“悬停”导航项目中移除焦点。

这是我最近使用的一段代码（使用 Modernizr 和 jQuery）：

            Modernizr.touch && $('body').on('touchstart',function(e) {
                $('input',$('#search')).focus().blur();
            });

Answer 2

也许像@media 这样的东西可以帮助你： http ://www.w3schools.com/css/css_mediatypes.asp