悬停 CSS 上的 iPad/iPhone 触摸事件答案

【问题标题】：iPad/iPhone Touch Event on Hover CSS悬停 CSS 上的 iPad/iPhone 触摸事件
【发布时间】：2011-10-05 00:42:25
【问题描述】：

我有一个像这样设置的简单菜单：

  <ul>
   <li>Item </li>
   <li>Item </li>
    <li>Item </li>
  </ul>

当您将鼠标悬停在计算机上的项目上时，它会显示其他 <ul> 和 <li> 项目正常。在 i 设备上，如果您触摸该项目，它不会做任何事情。我的第一个 <li> 有一个称为标志性作品的图像完美，但我不知道为什么它有效而其他人没有。

http://jsfiddle.net/5v9nc/

感谢您的帮助。

我试过这个：

http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/

但这并没有帮助。请帮忙！我已经尝试了以下建议，但它不适用于我的小提琴示例。

【问题讨论】：

stackoverflow.com/questions/3501586/…
@BNL 没用。我试过了。
您为什么不检查用户是否在移动设备上，如果是，您将悬停事件更改为点击事件？如果用户再次“点击”，则继续使用相同的代码。

标签： jquery iphone html css

【解决方案3】：

您可以尝试使用 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");
      });
}

参考：http://blog.0100.tv/2010/05/fixing-the-hover-event-on-the-ipadiphoneipod/

【讨论】：

没用。。我试过了。我的 ul 在我最上面的 li 显示中：无。在悬停时我有一个显示：块。

【解决方案4】：

Terraling 使用 onclick="return true" 的解决方案对我很有帮助。我通过在 JQuery 中使用一行将其添加到我的导航列表中的所有 li 元素使其更加优雅，这使原始 HTML 保持美观和整洁。在 iPhone 和 iPad 上的 iOS 5.1 上对其进行了测试。

$("ul#bars li").attr("onclick","return true");

【讨论】：

【解决方案5】：

不需要 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 -->

以及控制它的 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;
}

【讨论】：

【解决方案6】：

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:

$(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();
        });
    }
});

【讨论】：