Safari Mobile：触摸时切换内容

Question

我正在改编一个网站，以便让它在 iPad 上具有原生的感觉。

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

现在我需要在再次触摸导航点时使其再次关闭。

我在想，我可以在悬停时设置 pointer-events:none 。对于 iPad 有效，但这会使子导航闪烁并且不起作用...

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

任何想法，我如何仅使用 CSS 解决这个问题。 （我无法修改 HTML 或 JS）

PS：您可以在 www.macprime.ch 上重现此内容例如...（单击顶部的主导航，然后尝试再次关闭下拉菜单）

编辑 好的，我几乎尝试了仅使用 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 伪选择器做出如此复杂的东西。

Answer 2

这是一个有趣的问题，与我最近提出的问题类似。如何将悬停时显示的标准导航下拉菜单与触摸事件界面结合起来。使用悬停事件作为触发器在桌面上效果非常好。在没有悬停事件（平板电脑和智能手机）的世界中，情况并非如此。

就我而言，我想到了定义行为的想法：单击/触摸事件将执行触发，悬停事件将执行微妙的指示。有关这一思路的更多详细信息，请参阅：http://www.markdotto.com/2012/02/27/bootstrap-explained-dropdowns/" rel="nofollow"> markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

对于您试图解决的问题，我想知道是否使用 @media 查询你的 CSS 是一个更好的解决方案...

@media (max-width: 979px) {

    /*
        New CSS declarations to show the sub navigation lists
        in a more compact way that fits nicely on the iPad.

        Something like...
    */

    section.nav-overlay {

        display: block;
        height: 60px;
        visibility: visible;
        width: 979px; /* Or the max container width */

    }

        section.nav-overlay ul li {

            float: left;

        }

        /*

            Etc. etc. with the additional exceptions.
            You get the idea.

        */

}

通过这样做，你可以在 iPad 上创建更多的原生界面。然而，如果走这条路是不可能的，那么像布莱恩上面的那样的东西会更好。只是想给你一个替代方案。

Answer 3

在活动状态上设置pointer-events: none：

nav#mainnavi > ul > li > a:active {
  pointer-events: none
}