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

Question

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

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

大家遇到过这种情况吗？是否可以让它在移动设备上以不同的方式工作？应该吗？

Answer 1

有几种方法可以解决这个问题 - 这是最快的(hackiest)方法:

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

这是我最近使用的一段代码(使用 Modernizr 和 jQuery):

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