Question

我有一个预计会在iPad上运行的网络应用程序。我不希望为导航创建一个“下拉”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');
  }  
}();

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

所以，这一切都“有效”......但有两件事让我烦恼：

单击父导航时，会出现某种阴影的闪烁。我确定它是一个操作系统“点击链接”指示器，但它没有由CSS或JavaScript明确提供。如果有人看过这样的话，你知道怎么禁用吗？
似乎偶尔出现侥幸，代表子菜单的UL似乎出现，消失，再次出现。同样，我不认为逻辑本身能够导致这种情况，所以它可能是特定于浏览器的。

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

我想我的问题不仅仅是代码审查：“这些只是我不得不忍受的iOS怪癖吗？”并且“是否有一个明确的更好的实践，以触摸启用下拉菜单？”其次，所有“我看到你的代码有问题”的建议都会受到欢迎和赞赏。：）

Answer 1

摆脱拍打颜色

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

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

我还会使用“＆gt; 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，无论哪种方式对您有用

iPad - 下拉导航更好的做法？

1 个答案: