jQuery 悬停 CSS 上的 iPad/iPhone 触摸事件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7655596/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iPad/iPhone Touch Event on Hover CSS
提问by JD Audi
I have a simple menu set up like this:
我有一个简单的菜单设置如下：
<ul>
<li>Item </li>
<li>Item </li>
<li>Item </li>
</ul>
When you hover over the item on the computer it shows the other <ul>and <li>items fine. On the i-devices, if you touch the item, it does not do anything. My very first <li>that has an image called iconic works perfect, but I cannot figure out why that works and the others do not.
当您将鼠标悬停在计算机上的项目上时，它会显示其他项目<ul>和<li>项目。在 i 设备上，如果您触摸该项目，它不会执行任何操作。我的第一个<li>有一个称为标志性的图像完美无缺，但我不知道为什么它有效而其他人却没有。
Thank you for your help.
感谢您的帮助。
I tried this:
我试过这个：
http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/
http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/
But it did not help. Please help! I have tried the suggestions below but it does not work for my fiddle example.
但它没有帮助。请帮忙！我已经尝试了下面的建议，但它不适用于我的小提琴示例。
回答by JD Audi
I found out how. Add
我发现了如何。添加
<a href='#'>(your menu header)</a>
to all of the <li>in the parent <ul>. No jQuery/JS required.
到<li>父中的所有<ul>。不需要 jQuery/JS。
回答by terraling
I had the same problem and after looking at your solution I tried something absurdly simple that has worked, so I thought I'd share it.
我遇到了同样的问题，在查看了您的解决方案后，我尝试了一些非常简单但有效的方法，所以我想我会分享它。
To restate the problem, I have CSS menus where hover-ing over a menu item reveals the sub-menu items. On the iPad which has no hover, clicking on the menu item reveals the sub-menu in some cases and not in others.
为了重申这个问题，我有 CSS 菜单，其中悬停在菜单项上会显示子菜单项。在没有悬停的 iPad 上，单击菜单项在某些情况下会显示子菜单，而在其他情况下则不会。
Wherever it doesn't work, I just add onclick="return true"to the <li>, and hey presto it works.
只要它不起作用，我就添加onclick="return true"到<li>, 嘿，它很快就起作用了。
回答by coto
You could try using touchstart or touchend which is probably a better method depending on what you're trying to accomplish.
您可以尝试使用 touchstart 或 touchend 这可能是更好的方法，具体取决于您要完成的工作。
//ipad and iphone fix
// using jQuery 1.7.x (on method instead bind)
if ( (navigator.userAgent.match(/iPhone/i))
|| (navigator.userAgent.match(/iPod/i) )
|| (navigator.userAgent.match(/iPad/i)))
{
$(".menu li a").on('touchstart', function(){
console.log("touch started");
});
$(".menu li a").on('touchend', function(){
console.log("touch ended");
});
}
Ref: http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/
参考：http: //blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/
回答by Colin James Firth
Terraling's solution using onclick="return true" worked a treat for me. I made it more elegant by using a line in JQuery to add it to all the li elements in my nav list, which kept the raw HTML nice and neat. Tested it on iOS 5.1 on the iPhone and iPad.
使用 onclick="return true" 的 Terraling 解决方案对我来说是一种享受。我通过在 JQuery 中使用一行将它添加到我的导航列表中的所有 li 元素使它更加优雅，这使原始 HTML 保持整洁。在 iPhone 和 iPad 上的 iOS 5.1 上对其进行了测试。
$("ul#bars li").attr("onclick","return true");
$("ul#bars li").attr("onclick","return true");
回答by chown
No jquery or javascript needed. Just html/css:
不需要 jquery 或 javascript。只是 html/css：
<div id="header">
<ul id="nav">
<li><a href="something">something</a></li>
<li><a href="something">something</a>
<div class="drop">
<ul>
<li><a href="something">something</a></li>
<li><a href="something">something</a></li>
</ul>
</div> <!-- /.drop -->
</li>
<li><a href="something">something</a></li>
<li><a href="something">something</a></li>
</ul>
</div> <!-- /#header -->
And the CSS that controls it:
以及控制它的 CSS：
.drop ul:after,
#nav:after
{
content:'';
display:block;
clear:both;
}
#nav li
{
position:relative;
width:25%;
float:left;
padding:16px 0 0 0;
background:url(../images/separator.gif) no-repeat;
letter-spacing:1px;
word-spacing: -1px;
text-align:center;
}
#nav li:first-child,
#nav li.first-child
{
background:none;
}
#nav a
{
color:#E39916;
padding:0 0 13px;
display:block;
}
#nav a:hover
{
color:#37ABD6;
}
#nav li:hover,
#nav li.hover
{
position:relative;
}
#nav li:hover .drop .drop,
#nav li.hover .drop .drop
{
display:none;
}
#nav li:hover .drop,
#nav li.hover .drop,
#nav li .drop li:hover .drop,
#nav li .drop li.hover .drop
{
display:block;
}
#nav .drop li:hover .drop .drop,
#nav .drop li.hover .drop .drop
{
display:none;
}
#nav .drop .drop li:hover .drop,
#nav .drop .drop li.hover .drop
{
display:block;
}
.drop
{
position:absolute;
left:1px;
top:50px;
background-color:#E8F7FF;
border:1px solid #fff;
border-width:1px 1px 0;
width:90%;
min-width:115px;
display:none;
}
.drop .drop
{
left:95%;
top:2px;
z-index:9999;
}
.drop-left
{
left:-95% !important;
top:2px;
z-index:9999;
}
.drop ul
{
margin:0;
padding:0;
list-style:none;
width:100%;
}
#nav .drop li
{
margin:0;
padding:0;
background:none;
font-size:13px;
line-height:14px;
border-bottom:1px solid #fff;
float:left;
width:100%;
letter-spacing:1px;
}
#nav .drop li .drop li a,
#nav li .drop a
{
text-decoration:none;
background:none;
display:block;
color:#1C9CCB;
padding:5px 5px 4px 5px;
height:1%;
}
#nav .drop li .drop li a:hover,
#nav .drop li:hover a,
#nav .drop li.hover a,
#nav .drop a:hover
{
background:#F9EFD1;
color:#D88F0E;
text-decoration:none;
}
#nav .drop .drop a
{
padding-left:8px !important;
}
#main
{
width:100%;
overflow:hidden;
margin:0 0 -391px;
padding:10px 0 0 0;
position:relative;
}
回答by J Haagsman
HTML:
HTML：
<ul>
<li class="main_menu_item"><a href="/">Page</a></li>
<li class="main_menu_item"><a href="/">Page</a>
<ul class="sub_menu">
<li><a href="/">Page</a></li>
</ul>
</li>
</ul>
jQuery:
jQuery：
$(document).ready(function() {
if ( (navigator.userAgent.match(/iPhone/i))
|| (navigator.userAgent.match(/iPod/i) )
|| (navigator.userAgent.match(/iPad/i))) {
$('.main_menu_item').bind('mouseenter', function(e) {
$(this).find('.sub_menu').show();
$(this).find('.sub_menu').css('visibility','visible');
});
$('.main_menu_item').bind('mouseleave', function(e) {
$(this).find('.sub_menu').hide();
});
}
});
