0

我有一个有望在 iPad 上运行的 Web 应用程序。我不希望为导航创建一个“下拉”HTML 元素（即一个选择元素），因为我有很多空间。我想使用我现有的桌面样式“悬停然后选择”类型导航，但用点击替换悬停事件。

我只需要支持 iPad 的移动 Safari，尽管其他浏览器支持可能是一个加分项。

以下是导航的结构：

<nav id="main_navigation">
  <ul>
    <li>
        <a id="nav_home" href="/index.jsp">home</a>
    </li>
    <li class="menuHasDrop" id="selected">
        <a id="parent" href="/parent.jsp">parent</a>
        <span class="navArrow"></span>
        <ul>
          <li><a id="foo" href="/foo.jsp">foo</a></li>
          <li><a id="bar" href="/bar.jsp">bar</a></li>
        </ul>
    </li>   
    <li>
        <a id="baz" href="baz.jsp">baz</a>
    </li>      
  </ul>
</nav>

以下是我检测和启用触摸的方式：

fc.enableTouch = function() {  
  (function() {
    try {
      document.createEvent('TouchEvent');
      fc.touchEnabled = true;
    } catch(e) {}
  })();

  if (fc.touchEnabled) {
    $(document).ready(function() {

      // disable clicks on parents
      var $menus = $('.menuHasDrop');
      $menus.on('click', '>a', function(e){
        return false;
      })

      // listen for clicks on others          
      $('#main_navigation').on('click', $menus, function(e) {
        e.stopImmediatePropagation();
        var $this = $(this);
        if ($this.parent().children('ul').length > 0) {
          $menus.find('ul').hide();
          $this.toggleClass('expanded');
          if($this.hasClass('expanded')) {  
            $this.find('ul').show();
          }
        }
      });
    });
  } else {
    // console.log('not detecting touch');
  }  
}();

“扩展”类只是一个标志。我可以用另一种方式设置标志，但这并不重要。

所以，这一切都“有效”......但有两件事困扰着我：

  1. 当我单击它时，在父导航上会有某种阴影闪烁。我确定这是一个操作系统“点击链接”指示器，但它不是由 CSS 或 JavaScript 明确提供的。如果有人见过这样的事情，你知道如何禁用它吗？

  2. 似乎时不时地，代表子菜单的 UL 似乎会出现，消失，然后再次出现。同样，我不认为逻辑本身会导致这种情况，所以它可能是特定于浏览器的。

其他有用的背景信息：总是有一个或多个内容区域通过 ajax 调用被刷新，但页面本身没有被刷新，并且导航区域在请求期间没有任何功能作用于它。

我想我要问的不仅仅是代码审查：“这些只是我必须忍受的 iOS 怪癖吗？” 和“是否有明确的更好的触摸启用下拉菜单的做法？” 其次，所有“我发现你的代码有问题”的建议都将受到欢迎和赞赏。:)

4

1 回答 1

1

摆脱水龙头颜色

-webkit-tap-highlight-color:rgba(0,0,0,0);

对于绑定，使用 touchstart/touchend 我在当前项目中所做的是检测触摸，如果启用触摸，则仅绑定 touchstart 和 end，如果没有则绑定单击

我还将使用“>a”向您定位的锚添加一个类，这真的很慢

$(#el).on('touchstart', function() {
    // if class exist
       // go to link

    // else
       // add class and open dropdown
});

对于我当前的项目，我们设置了一个虚拟事件处理程序来检测触摸是触摸移动还是常规触摸启动

你也可以做这样的事情

$(#el).on('touchstart', function() {
    $(this).trigger('click');
    // or you can use prevent default and stopPropagation
    return false;
});

或在 touchend 上绑定，无论哪种方式更适合您

于 2013-03-28T19:44:28.187 回答