0

iPad で実行する予定の Web アプリケーションがあります。不動産がたくさんあるので、ナビゲーション用の「ドロップダウン」HTML 要素 (つまり、select 要素) を作成したくありません。既存のデスクトップ スタイルの「ホバーしてから選択」タイプのナビゲーションを使用したいのですが、ホバー イベントをタップに置き換えます。

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

「展開された」クラスは単なるフラグです。別の方法でフラグを設定することもできますが、それほど重要ではありません。

したがって、これはすべて「機能します」...しかし、私を悩ませていることが2つあります。

  1. 親ナビゲーションをクリックすると、その上に何らかの影がちらつきます。OS の「リンクをクリックした」インジケーターだと確信していますが、CSS や JavaScript によって明示的に提供されているわけではありません。誰かがそのようなものを見た場合、それを無効にする方法を知っていますか?

  2. たまたま、サブメニューを表す UL が表示され、消えて、再び表示されるようです。繰り返しますが、ロジック自体がこれを引き起こす可能性があるとは思わないため、ブラウザ固有のものである可能性があります。

その他の有用な背景情報: ajax 呼び出しによって更新される 1 つ以上のコンテンツ領域が常に存在しますが、ページ自体は更新されず、ナビゲーション領域には要求中に動作する機能がありません。

私が求めているのは、コード レビュー以上のものだと思います。そして「タッチ対応ドロップダウンのための決定的なより良い方法はありますか?」第二に、「あなたのコードに問題がある」というアドバイスはすべて歓迎され、高く評価されます。:)

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

私の現在のプロジェクトでは、仮想イベント ハンドラーを設定して、タッチが touchmove なのか、通常の touchstart なのかを検出します。

このようなこともできます

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

またはタッチエンドでバインドするなど、あなたにとってより良いものは何でも

于 2013-03-28T19:44:28.187 に答える