1

我正在尝试使用一些 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; }
4

2 回答 2

2

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

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"到列表项来使其键盘可访问:)

于 2012-04-18T23:51:02.333 回答
0

我找到了解决方案。本质上，ios不会将点击绑定到任何显示：块/无或可见性：隐藏/可见的悬停。因此，您只需使用“左”“隐藏”下拉菜单来补偿不支持不透明度的 <=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;}

然后确保不要在过渡中使用“全部”，否则它也会为 left 属性设置动画:) 这种方法的唯一问题是你的过渡只会在途中而不是出路中起作用。

于 2012-04-25T04:22:46.797 回答