ホームページ >ウェブフロントエンド >CSSチュートリアル >ドロップダウン メニューの切り替えをマウスとタッチ デバイスの両方で機能させるにはどうすればよいですか?

ドロップダウン メニューの切り替えをマウスとタッチ デバイスの両方で機能させるにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-06 20:07:15428ブラウズ

How Can I Make a Dropdown Menu Toggle Work on Both Mouse and Touch Devices?

タッチ デバイスのドキュメント .click 関数

タッチ デバイスのドロップダウン メニューを切り替えるには、.on( ) ドキュメント上のクリック イベントとタッチ イベントの両方をリッスンするイベント ハンドラー。更新されたコード:

$(document).on('click touchstart', function() {

  if ( $(".children").is(":visible")) {
    $("ul.children").slideUp('slow');
  }

});

これが機能する理由:

クリック イベント:
クリック イベントは通常、マウスのクリックによってトリガーされますが、最新のブラウザーではタッチ スクリーンのタップに対してもこのイベントを発生させます。

touchstartイベント:
要素がタッチされるとすぐに touchstart イベントが発生し、タッチ入力の標準クリック イベントをサポートしていない可能性があるデバイスでも関数が確実にトリガーされます。

を使用することにより、 「click」イベントと「touchstart」イベントの両方を含む .on() イベント ハンドラーを使用すると、入力方法 (マウス クリックまたはタッチ) に関係なく関数が実行されることが保証されます。これにより、ユーザーはデスクトップとタッチ デバイスの両方でドロップダウン メニューを一貫して切り替えることができます。

以上がドロップダウン メニューの切り替えをマウスとタッチ デバイスの両方で機能させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。