Question

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

此网站的导航显示悬停时子导航的下拉列表。这就像iPad上的魅力。当您触摸subnav时，当您单击/触摸其他位置时，它会再次打开和关闭。

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

我在想，我可以将pointer-events:none设置为悬停＆amp;对iPad有效，但这会使子导航闪烁而且不起作用......

我还尝试使用before选择器覆盖导航点，并将其指针事件设置为none，但这不起作用...

任何想法，我如何使用仅限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更改：

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

你可能能够用CSS做这两件事，但我不确定。平板电脑检测在CSS中会有点粗略，我认为你不能使用：before或：after伪选择器来创建复杂的东西。

Answer 2

这是一个有趣的问题，类似于我最近提出的问题。如何结合使用触摸事件界面悬停时显示的标准导航下拉列表。使用悬停事件作为触发器在桌面上运行良好。在没有悬停事件的世界（平板电脑和智能手机），没有那么多。

在我的情况下，我着眼于定义行为的想法：点击/触摸事件会触发，悬停事件会做微妙的指示。有关此思路的详细信息，请参阅：http://www.markdotto.com/2012/02/27/bootstrap-explained-dropdowns/

对于您要克服的问题，我想知道在CSS中使用@media查询是否是更好的解决方案......

@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上创建更多的本机界面。但是，如果走这条路线不在桌面上，那就像Brian上面所做的那样更好。只是想给你一个替代品。

Answer 3

将pointer-events: none设置为活动状态：

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

Safari Mobile：触摸时切换内容

3 个答案: