基于触摸的客户端的CSS下拉列表.纯CSS下拉是否会灭绝？

Question

我的公司开始将iPad添加为浏览器,我必须测试我的工作.这让我想到了......

由于基于触摸的客户端没有:悬停状态纯CSS下拉列表会消失吗？

然后我想即使你添加一些javascript来点击菜单弹出菜单...当菜单项(扩展到另一个菜单)也是一个链接时会发生什么.如何区分单击以查看菜单或单击以转到该链接？

当基于触摸的客户端变得无处不在时,下拉菜单会发生什么？那还有解决方法吗？

Answer 1

由于:target伪类,触摸设备上可以实现纯CSS下拉.基本上,伪类对于具有与当前URL片段匹配的id的对象是活动的.这意味着URI片段可用于存储和共享CSS状态.例如,假设我们在http://example.com/上,它具有以下HTML和CSS:

<style>
    #menu {
        display: none;
    }
    #menu:target {
        display: block;
    }
</style>

<a href="#menu">Show the Menu!</a>
<div id="menu"> ... </div>

默认情况下隐藏菜单.单击或点击链接会将URL片段更改为"menu"(完整URI:http://example.com/#menu).因为现在有一个id等于URI片段("menu")的元素,所以:target伪类适用,并且显示属性被更改.

进一步阅读:

• Mozilla开发人员网络的用法和示例
• 实现触摸友好的纯CSS下拉列表