0

我有以下 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");
        });
    };

谢谢你的帮助。

4

2 回答 2

1

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

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

于 2012-10-01T15:39:27.283 回答
0

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

但是，浏览器会尝试处理它：

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

但是你最好的选择是设计一些东西来解决移动用户不能悬停的事实，而是注意像 touchStart 这样的东西。

于 2012-10-03T20:50:13.380 回答