Question

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

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

你们有没有人见过这个？是否可以在移动设备上以不同的方式工作？应该吗？

Answer 1

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

创建一个隐藏的输入（如果你总是在你的页面上，你可以使用常规输入）。听取身体上的“触摸启动”事件 - 如果目标位于导航元素内，您可以忽略它，另外，同时聚焦和模糊输入元素。这将从您的“悬停”导航项中删除焦点。

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

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

Answer 2

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