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

Question

My navigation is a short bar that is fixed to the top of the screen. If you hover over it, it expands to show you the menu options and collapses if you roll out of it. This works great on the desktop (and actually even modern Android devices where you can click inside the nav to open it, and click outside to close it). On iOS devices, touching the nav will open it, but touching outside the nav will NOT close it, except in odd cases like touching an image.

I could rewrite the nav so it opens/closes on click across the board, but that feels clunky on the desktop. Having it open and close on hover feels more discoverable and snappy.

Have you folks ever come across this? Is it possible to have it work differently on mobile? Should it?

Answer 1

There's a few ways to solve this - here's the fastest (hackiest) one:

Create a hidden input (or you can use a regular input if you've always got on on your page). Listen for a "touchstart" event on the body - if the target is inside your nav element you can ignore it, OTHERWISE, focus and blur that input element simultaneously. This will remove focus from your "hovered" nav item.

This is a piece of code I recently used (uses Modernizr and jQuery):

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

Answer 2

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