0

レスポンシブナビゲーションを構築していますが、問題が発生しました。ナビゲーションの本質はそれが応答することであるため、「3行」ボタンをクリックすると、メニューがページにポップアップ表示されます。メニューはネストされた<ul>をサポートしているため、メニュー内でボックス（右側）をクリックしてネストされたメニューを開くこともできます。ここでの私の問題は、ホバーではなく、クリック時にナビゲーションを開きたいということです。

本質的に：

  • メインナビゲーション（デスクトップ）：<li>にカーソルを合わせて子を開きます<ul>
  • 特定の幅（メディアクエリ）未満の場合、それを非表示にしてクリックするブラックボックスを表示し、次のボックスをクリックして<ul>を開くことができます。

すべて正常に機能していますが、デスクトップナビゲーションを開くためのホバーイベントは、レスポンシブビューのときにナビゲーションを開くようにトリガーしていることは明らかです。どうすればこれを防ぐことができますか？

これがナビゲーションのJSFiddleです。ブラックボックスをクリックしてください：http：//bit.ly/ZZJcYk

4

1 に答える 1

1

私がお勧めする1つの方法は、http： //modernizr.com/を使用することです。

レスポンシブサイト/アプリを開発する際に、他の多くの点で役立ちます。

これを含めることで、（とりわけ）HTMLノードのクラスを取得できます。

ユーザーがタッチデバイスを使用している場合は.touchクラスになり、そうでない場合は.no-touchになります。

これを利用するには、コードで次のようにします。

$('.no-touch .nav').on({
        mouseenter: function () {
            $(this).children('.nav-submenu').toggle();
        },
        mouseleave: function () {
            $(this).children('.nav-submenu').toggle();
        }
    }, '.nav-item');

これ$('.no-touch .nav')により、このコードがデスクトップなどのノータッチデバイスでのみ実行されるようになります。他の解決策もありますが、modernizrを使用することは、長期的には強くお勧めします。

于 2013-03-24T20:56:35.197 に答える