css - Safari 手机 : Toggle contents on touch

Question

我正在调整一个网站，以使其在 iPad 上具有原生的感觉。

该网站的导航显示了一个下拉菜单，鼠标悬停时有子导航。 这在 iPad 上就像一个魅力。当您触摸子导航时，它会在您点击/触摸其他地方时再次打开和关闭。

现在我有需求，当导航点再次被触摸时，它会再次关闭。

我在想，我可以将 pointer-events:none 设置为 iPad 的悬停和事件状态，但这会使子导航闪烁并且不起作用...

我也尝试过用 before 选择器设置的元素覆盖导航点并将其指针事件设置为无，但这不起作用...

知道如何使用仅使用 CSS 来解决这个问题。 (我不能修改 HTML 和 JS)

PS:您可以在 www.macprime.ch 上复制它例如...(单击顶部的主导航，然后再次尝试关闭下拉菜单)

edit 好的，我尝试了几乎所有仅使用 CSS 的方法。我认为这不可能。如果有人能告诉我原因，他/她将获得赏金。

Answer 1

您可以在您点击的元素上方显示第二个透明元素。这样，当用户再次点击时，他们将选择另一个元素，而第一个元素将失去其悬停状态:

<div class="blocker" onclick="void()"></div>
<div class="menuItem" onclick="void()"></div>

<style>
    .blocker, .menuItem {
        /* use the same position, width, height, etc */
    }
    .menuItem {
        /* make it look pretty */
        z-index: 100;
    }
    .blocker {
        z-index: 99;
    }
    .menuItem:hover {
        z-index: 98;
    }
</style>

当然，这会对桌面产生负面影响，因此您需要执行以下操作:

<style>
    .blocker { display: none; }
    .touchevents .blocker { display: block; }
</style>
<script>
    if('ontouchstart' in document)
        document.body.className += ' touchevents';
</script>

更新 添加了 onclick 事件以使其可点击。

您可以在此处查看工作演示:http://fiddle.jshell.net/vfkqS/6/

不幸的是，我找不到不需要更改 HTML 或 JavaScript 的解决方案，但我能够将它们保持在最低限度。

您总共需要进行两项非 CSS 更改:

1. 添加一个 JavaScript 机制来识别是否支持触摸事件。请参见上面的两行示例。
2. 为每个菜单添加一个可点击的 div (onclick="void()")，并具有可将其链接到菜单的唯一标识符。

您可能可以使用 CSS 完成这两件事，但我不确定。平板电脑检测在 CSS 中会有点粗略，我不认为你可以用 :before 或 :after 伪选择器做出那么复杂的东西。