当我们在平板电脑上点击外部时如何关闭 bootstrap 3 下拉菜单？

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 菜单相关，而不是一般的 dropdowns，但我在寻找我自己的答案时遇到了这个问题类似的问题（在外面点击时关闭汉堡包菜单），所以我想 post 其他人的替代解决方案，因为接受的答案不适用于 汉堡包子菜单 （点击打开 子菜单 将关闭 汉堡包 菜单。

此答案基于已接受的答案和 this answer, as well as NickGreen's comment on 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 下拉菜单？

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

javascript

jquery

twitter-bootstrap

twitter-bootstrap-3