如何可靠地关闭触摸和桌面设备上的下拉菜单？

文档.click 功能的触摸设备支持

使用响应式网站时，确保所有功能在两个桌面上保持完整至关重要和触摸设备。但是，某些事件（例如文档 .click 函数）可能无法在触摸屏上按预期工作。

问题：

使用父列表项上的 jQuery .click 事件。但是，单击屏幕上的任意位置来关闭下拉菜单在触摸设备上不起作用。

解决方案：

现代浏览器现在支持点击交互的单击事件，因此使用文档 .click 就足够了。但是，较旧的浏览器可能需要额外的触摸事件：

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

说明：

检测到触摸时立即触发 touchstart 事件，为设备提供后备不支持点击的单击事件。单击事件仍然保留，以处理现代浏览器上的单击和点击交互。

通过组合这两个事件，您可以确保无论使用什么设备，都可以通过单击或点击屏幕上的任意位置来关闭下拉列表.

以上是如何可靠地关闭触摸和桌面设备上的下拉菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！