Question

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

有没有办法让这些转换在浏览器中正常运行，而下拉菜单在iOS中工作而不使用javascript？

下拉在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

（忽略我关于event.preventDefault的原始评论......我忘了你正在使用列表项而不是锚点。）

但是，我确实认为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不会将点击绑定到悬停以显示任何内容：block / none或visibility：hidden / visible。所以你需要使用“左”来“隐藏”下拉列表以补偿不支持不透明度的＆lt; = 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;}

然后确保不要在转场中使用“全部”，否则它也会为左侧属性设置动画:) 这种方法唯一的问题是你的转换只能在不用出路的情况下工作。

CSS3下拉菜单＆amp; iOS问题

2 个答案: