Question

我这样做，桌面上的工作正常：

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

但在iPad上，它不起作用，我的下拉列表仍然打开

Answer 1

您应该使用触摸设备touchstart和touchend事件：

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

Answer 2

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

此答案基于已接受的答案和this答案，以及NickGreen对this答案的评论。

$('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');
        }
    }
});

Answer 3

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

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

当我们在平板电脑上点击外面时，如何关闭bootstrap 3下拉列表？

3 个答案: