ホームページ >ウェブフロントエンド >CSSチュートリアル >ドロップダウン メニューの切り替えをマウスとタッチ デバイスの両方で機能させるにはどうすればよいですか?
タッチ デバイスのドキュメント .click 関数
タッチ デバイスのドロップダウン メニューを切り替えるには、.on( ) ドキュメント上のクリック イベントとタッチ イベントの両方をリッスンするイベント ハンドラー。更新されたコード:
$(document).on('click touchstart', function() { if ( $(".children").is(":visible")) { $("ul.children").slideUp('slow'); } });
これが機能する理由:
クリック イベント:
クリック イベントは通常、マウスのクリックによってトリガーされますが、最新のブラウザーではタッチ スクリーンのタップに対してもこのイベントを発生させます。
touchstartイベント:
要素がタッチされるとすぐに touchstart イベントが発生し、タッチ入力の標準クリック イベントをサポートしていない可能性があるデバイスでも関数が確実にトリガーされます。
を使用することにより、 「click」イベントと「touchstart」イベントの両方を含む .on() イベント ハンドラーを使用すると、入力方法 (マウス クリックまたはタッチ) に関係なく関数が実行されることが保証されます。これにより、ユーザーはデスクトップとタッチ デバイスの両方でドロップダウン メニューを一貫して切り替えることができます。
以上がドロップダウン メニューの切り替えをマウスとタッチ デバイスの両方で機能させるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。