当前位置：文江博客话题详情

基于触摸的客户端上的 CSS 下拉菜单。纯 CSS 下拉菜单会消失吗？

发布于 2024-08-31 19:17:25 字数 242 浏览 3 评论 0原文

我的公司正开始将 iPad 添加为浏览器，我必须在其上测试我的工作。这让我开始思考...

既然基于触摸的客户端没有 :hover 状态，纯 CSS 下拉菜单会消失吗？

然后我想即使你添加一些 JavaScript 来使菜单在单击时弹出......当菜单项（扩展到另一个菜单）也是一个链接时会发生什么。您如何区分单击查看菜单和单击转到该链接之间的区别？

当基于触摸的客户端变得更加普遍时，下拉菜单会发生什么？还有解决方法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

好听的两个字的网名 2024-09-07 19:17:25

由于 :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 片段更改为“菜单”（完整 URI：http://example.com/#menu ）。因为现在有一个 id 等于 URI 片段（“菜单”）的元素，所以 :target 伪类适用，并且显示属性发生更改。

进一步阅读：

Pure CSS dropdowns are possible on touch devices thanks to the :target pseudo-class. Basically, the pseudo-class is active for objects that have an id matching the current URL fragment. This means that the URI fragment can be used to store and share state with CSS. For example, let's say we're on http://example.com/, which has the following HTML and CSS:

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

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

The menu is hidden by default. Clicking or tapping the link will change the URL fragment to "menu" (full URI: http://example.com/#menu). Because now there is an element with an id equal to the URI fragment ("menu"), the :target pseudo-class applies, and the display property is changed.

Further reading:

回复收藏 0 原文