Question

我有以下html标记适用于所有浏览器，但在iPhone / ipad中查看时，下拉列表将无法打开。

使用空锚标记的原因是由于我当前的css规则，使其保持样式的父链接与我的菜单链接的其余部分相同;但同时阻止父链接重定向页面。

这是一种非常错误的方法，是我遇到的问题的原因吗？

<ul class="primary-nav">
   <li><a>Group links</a>
    <ul id="sub_nav" class="sub">  
    <li><a href="/">Link</a></li>  
    <li><a href="/">Link 1</a></li>  
    <li><a href="/">Link 2</a></li>  
    <li><a href="/">Link 3 </a></li>
    </ul>
   </li>
  </ul>

我可以看到菜单中存在以下javascript

    // Test is browser is IE
    var browserIsIE = null;
    if (jQuery.browser.msie == true) {
        browserIsIE = true;
    } else {
        browserIsIE = false;
    };
 // primary and secondary nav hover for IE < 9
    if (browserIsIE == true) {
        $(".primary-nav li, .secondary-nav li").hover(function () {
            $(this).addClass("hover");
        }, function () {
            $(this).removeClass("hover");
        });
    };

感谢您的帮助。

Answer 1

主要问题是当browserIsIE评估为false时，什么都不会发生。 if语句在将true事件处理程序附加到下拉菜单之前要求它为hover。

一旦解决了这个问题，您很快就会意识到您无法在触摸设备上hover。这篇文章https://ux.stackexchange.com/questions/14257/re-thinking-hover-functionality-with-touchscreens-in-mind涵盖了一些您可以实施的好主意。

Answer 2

问题是你正在观看悬停事件。移动设备上没有悬停事件。没有光标，因此无法悬停。

但浏览器会尝试处理它：

http://sitr.us/2011/07/28/how-mobile-safari-emulates-mouse-events.html

但您最好的选择是设计一些事项，以解释移动用户无法悬停而是关注touchStart之类的事情。

ipad / iphone功能问题

2 个答案: