CSS3 下拉菜单和 iOS 问题答案

【问题标题】：CSS3 Drop Down Menu & iOS issuesCSS3 下拉菜单和 iOS 问题
【发布时间】：2021-02-17 14:47:29
【问题描述】：

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

【问题讨论】：

您所说的 iOS 是指 Mobile Safari 吗？你为什么要依赖 :hover 触摸设备（这是不可预测的）？我看到您不想使用 JS，但它可以让您更精确地处理事件。在我看来，您应该使用 Javascript 点击事件来显示和隐藏内容并使用 event.preventDefault(); 抑制链接操作；

标签： ios css css-transitions

【解决方案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" 添加到列表项来使其键盘可访问:)

【讨论】：

【解决方案2】：

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

所以基本上使用您的第二个示例并稍作调整：

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 属性设置动画 :) 这种方法的唯一问题是您的转换只会在途中而不是出路中起作用。

【讨论】：