当我们在平板电脑上单击外部时，如何关闭引导程序 3 下拉菜单

How to close bootstrap 3 dropdown when we click outside on a tablet?

本文关键字：何关闭 引导程序 下拉菜单 外部 我们 平板电脑 单击      更新时间：2023-09-26

我正在这样做，它在桌子上工作正常：

$(document).on("click", function(){
  $(".dropdown-toggle").removeClass("open");
});

但是在iPad上它不起作用，我的下拉菜单仍然打开

您应该将touchstart和touchend事件与触摸设备一起使用：

$(document).on("click touchend", function(){
    $(".dropdown-toggle").removeClass("open");
});

这个答案与导航栏菜单有关，而不是一般的下拉菜单，但我在寻找我自己的类似问题的答案时遇到了这个问题（点击外面时关闭汉堡菜单），所以我想我会为其他人发布一个替代解决方案，因为接受的答案不适用于汉堡包子菜单（点击打开子菜单会关闭汉堡菜单）。

这个答案

是基于公认的答案和这个答案，以及尼克格林对这个答案的评论。

$('html').on('click, touchend', function (e) {
    // Close hamburger menu when tapping outside
    if ($(e.target).closest('.navbar').length == 0) {
        var opened = $('.navbar-collapse').hasClass('collapse in');
        if (opened === true) {
            $('.navbar-collapse').collapse('hide');
        }
    }
});

如果我不想在用户单击页面时关闭页面上的任何下拉列表，我会使用此代码段。

$(document).on('click touchend', function(e) {
  if ($(e.target).closest('.open').length === 0) {
    $('.dropdown-toggle').parent().removeClass('open');
  }
});
相关文章：