如何可靠地關閉觸控和桌面裝置上的下拉式選單？

文件.click 功能的觸控裝置支援

使用響應式網站時，請確保所有功能在兩個桌面上保持完整至關重要和觸摸設備。但是，某些事件（例如文件 .click 函數）可能無法在觸控螢幕上按預期工作。

問題：

使用父列表項目上的 jQuery .click 事件。但是，點擊螢幕上的任意位置來關閉下拉式選單在觸控裝置上不起作用。

解決方案：

現代瀏覽器現在支援點擊互動的點擊事件，因此使用文件 .click 就足夠了。但是，較舊的瀏覽器可能需要額外的觸控事件：

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

說明：

偵測到觸控時立即觸發touchstart 事件，為裝置提供後備不支援點擊的單擊事件。點擊事件仍然保留，以處理現代瀏覽器上的點擊和點擊互動。

透過組合這兩個事件，您可以確保無論使用什麼設備，都可以透過點擊或點擊螢幕上的任意位置來關閉下拉清單.

以上是如何可靠地關閉觸控和桌面裝置上的下拉式選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！