2

在导航菜单上，悬停时会出现子菜单

导航 html 是这样的：

<nav>
    <li>
        <a href="shop.html">Shop</a>
        <ul>
           <li><a href="shoes.html">Shoes</a></li>
           <li><a href="shirts.html">Shirts</a></li>
        </ul>
    </li>
    <li>
        <a href="about.html">About</a>
        <ul>
           <li><a href="history.html">History</a></li>
           <li><a href="stories.html">Stories</a></li>
        </ul>
    </li>
</nav>

所以基本上在桌面视图上， :hover 伪类有效，子菜单出现在鼠标上方并在鼠标移出时消失。

但是在移动设备或平板设备上，悬停当然不能工作，因为它只是手指触摸功能。所以这就是在设备上发生的事情，触摸时，子菜单会出现，但不会在第二次触摸时消失，只有当屏幕触摸菜单外时才会消失

触摸功能的最佳方法是什么？由于主导航也是链接，并且悬停在手机/平板电脑上不起作用？因此，可能会出现第一次触摸子菜单，双击快速触摸重定向链接，第二次触摸关闭子菜单。

知道怎么做吗？是否也可以只使用css3而不使用js？但如果不是 jquery 对我来说很酷..

谢谢 ：）

4

1 回答 1

1

在http://bradfrost.github.io/this-is-responsive/patterns.html检查“多级导航”模式以解决您的子菜单问题

于 2013-08-13T17:10:19.643 回答