CSS3 下拉菜单和 iOS 问题

Question

我正在尝试制作一个带有一些 CSS3 过渡的下拉导航菜单。但是，当使用可见性隐藏/可见时，iOS 不会显示下拉列表（它只是转到链接）。如果我使用显示无/块，iOS 将在第一次单击父元素时显示下拉菜单，但过渡在任何浏览器中都不起作用。

有没有办法让这些过渡在浏览器中正常运行，并且下拉列表在不使用 javascript 的情况下在 iOS 中工作？

下拉菜单在 iOS 中不起作用：

nav ul li ul {
    position: absolute; visibility: hidden; opacity: 0; left: 0; top: 50px; z-index: 99;
    -webkit-transition: all .35s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -o-transition: all .35s ease-in-out;
    -ms-transition: all .35s ease-in-out;
    transition: all .35s ease-in-out;
}
nav ul li:hover > ul { visibility: visible; opacity: 1; top: 40px; }

过渡在浏览器中不起作用：

nav ul li ul {
    position: absolute; display: none; opacity: 0; left: 0; top: 50px; z-index: 99;
    -webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -o-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -ms-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    transition: opacity .35s ease-in-out, top .35s ease-in-out;
}
nav ul li:hover > ul { display: block; opacity: 1; top: 40px; }

Answer 1

在考虑了更多之后，我发现了以前从未见过的文档 - 您遇到的一些奇怪之处可能是因为您将行为附加到默认情况下不具有交互性的东西上的伪元素（只有锚点和表单元素是可点击的）。

http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html

（忽略我关于事件.预防默认的原始评论...我忘了您正在使用列表项而不是锚点。

但是，我仍然认为JS是最好的方法，因为您可以非常具体地了解附加到任何类型的元素的事件。您可以只应用 CSS 类，它将使用您已经指定的过渡属性。

喜欢这个：

// CSS
nav ul li > ul.visible { display: block; opacity: 1; top: 40px; }
// JS
// you could bind mouseover/out here too if you want it to work on both desktop & mobile
$('nav ul li').bind('click', function(){
    $(this).children('ul').toggleClass('visible');
});

如果你想变得特别棒，你可以通过向列表项添加tabIndex="0"来使其键盘可访问:)

Answer 2

我为此找到了解决方案。从本质上讲，ios不会将点击绑定到任何显示：阻止/无或可见性：隐藏/可见的悬停。因此，您只需使用"left"隐藏"下拉列表即可补偿不支持不透明度的 <=ie8。

因此，基本上使用您的第二个示例并进行细微调整：

nav ul li ul {
    position: absolute; opacity: 0; left: -888em; top: 50px; z-index: 99;
    -webkit-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -moz-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -o-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    -ms-transition: opacity .35s ease-in-out, top .35s ease-in-out;
    transition: opacity .35s ease-in-out, top .35s ease-in-out;
}
nav ul li:hover > ul {opacity: 1; top: 40px; left:0;}

然后，请确保不要在过渡中使用"all"，否则它也会使 left 属性动画化:)此方法的唯一问题是，您的过渡只会在途中起作用，而不是在出路时起作用。