タッチ デバイスとデスクトップ デバイスの両方でドロップダウンを確実に閉じるにはどうすればよいですか?

Document .click 機能のタッチ デバイス サポート

レスポンシブな Web サイトを操作する場合、両方のデスクトップですべての機能が損なわれないようにすることが重要ですそしてタッチデバイス。ただし、ドキュメントの .click 機能などの特定のイベントは、タッチスクリーンでは期待どおりに動作しない場合があります。

問題:

サブナビゲーション ドロップダウンは、親リスト項目の jQuery .click イベント。ただし、画面上の任意の場所をクリックしてドロップダウンを閉じる操作は、タッチ デバイスでは機能しません。

解決策:

最新のブラウザでは、タップ操作のクリック イベントがサポートされるようになりました。 document .click で十分です。ただし、古いブラウザでは追加のタッチ イベントが必要になる場合があります:

$(document).on('click touchstart', function () {
  if ( $(".children").is(":visible")) {
    $("ul.children").slideUp('slow');
  }
});

説明:

タッチが検出されるとすぐに touchstart イベントがトリガーされ、デバイスにフォールバックが提供されます。タップのクリック イベントをサポートしていません。クリック イベントは、最新のブラウザでクリックとタップの両方の操作を処理するためにそのまま残ります。

両方のイベントを組み合わせることで、使用されているデバイスに関係なく、画面上の任意の場所をクリックまたはタップしてドロップダウンを閉じることができます。 .

以上がタッチ デバイスとデスクトップ デバイスの両方でドロップダウンを確実に閉じるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。