jQuery技术:当我们在平板电脑上点击外面时,如何关闭bootstrap 3下拉列表?

我这样做,它在桌面上工作正常:

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

但在iPad上,它无法正常工作,我的下拉列表仍然打开

    您应该使用touchstarttouchend事件与触摸设备:

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

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

    这个答案是基于已接受的答案和答案,以及NickGreen对此答案的评论。

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

      以上就是jQuery教程分享当我们在平板电脑上点击外面时,如何关闭bootstrap 3下拉列表?相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。

      本文来自网络收集,不代表计算机技术网立场,如涉及侵权请联系管理员删除。

      ctvol管理联系方式QQ:251552304

      本文章地址:https://www.ctvol.com/jquerytutorial/562063.html

      (0)
      上一篇 2021年2月5日
      下一篇 2021年2月5日

      精彩推荐