ios – 为什么YouTube会干扰iPad悬停下拉菜单？

概述我在iPad(iOS 7)上遇到了简单的基于CSS悬停的下拉菜单的奇怪行为. 菜单按预期工作,第一次点击显示下拉菜单,第二次点击链接,除非页面上有YouTube视频.如果页面上有YouTube视频,则第一次点击会短时间显示该菜单,然后在没有第二次点击的情况下转到该链接. HTML是： <nav> <ul> <li> 我在iPad(iOS 7)上遇到了简单的基于CSS悬停的下拉菜单的奇怪行为.

菜单按预期工作,第一次点击显示下拉菜单,第二次点击链接,除非页面上有YouTube视频.如果页面上有YouTube视频,则第一次点击会短时间显示该菜单,然后在没有第二次点击的情况下转到该链接.

HTML是：

<nav>            <ul>                <li>                    <a href="/menutest/index.HTML">Menu Test Home</a>                    <ul>                        <li>                            <a href="/menutest/youtube.HTML">Youtube VIDeo Page</a>                        </li>                        <li>                            <a href="/menutest/plain.HTML">Plain Text Page</a>                        </li>                    </ul>                </li>            </ul>        </nav>

CSS是：

nav ul li ul {    display:none;}nav ul li:hover ul {    display:block;}

YouTube代码是：

<iframe src="http://www.youtube.com/embed/O8_eFRZP1uQ?showinfo=0&rel=0" frameborder="0"></iframe>

在Vimeo或Wistia上托管的视频不会出现此问题.

我之前发布了一个关于这个主题的问题,但由于我没有发现问题并且没有提出明确的问题而撤回了它.

一个例子可以在http://silvermapleweb.com/menutest/找到

解决方法 当用户在/index.HTML,并且您单击菜单测试主页时,页面已经在该页面上,因此可能ios safari不会重新加载页面,因此下拉列表正确显示.

在youtube页面(/youtube.HTML)上,然后按Menu Test Home链接,用户实际上会被发送到新页面.在页面重新加载新内容(现在位于/index.HTML)之前,会简要显示该菜单.

如果您不想将用户发送到新页面,请不要使用href位置,也不要添加event.preventDefault();在Menu Test Home链接上的单击事件上.

总结

以上是内存溢出为你收集整理的ios – 为什么YouTube会干扰iPad悬停下拉菜单？全部内容，希望文章能够帮你解决ios – 为什么YouTube会干扰iPad悬停下拉菜单？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。