下拉菜单在移动设备上不起作用答案

【问题标题】：Drop-Down Menu not working on mobile devices下拉菜单在移动设备上不起作用
【发布时间】：2013-07-08 22:05:33
【问题描述】：

最新版本的 twitter bootstrap (2.3.2) 似乎确实在移动设备上存在下拉菜单问题。

当您在打开菜单后单击下拉菜单项时，菜单会简单地关闭并且不会单击任何链接。你可以在他们的示例页面上看到这个：http://twitter.github.io/bootstrap/examples/hero.html

我在他们的 github 页面上发现了一个问题，但没有解决方案：https://github.com/twitter/bootstrap/issues/7927

有人知道修复它的诀窍吗？

【问题讨论】：

标签： twitter-bootstrap twitter drop-down-menu responsive-design

【解决方案1】：

临时解决办法是添加

.dropdown-backdrop{
    position: static;
}

到 css 文件。

【讨论】：

使用 BS 2.3.2 为我工作。谢谢！
哇...谢谢；我已经为此奋斗了三天。

【解决方案2】：

这对我有用：

$('.dropdown-toggle').click(function(e) {
  e.preventDefault();
  setTimeout($.proxy(function() {
    if ('ontouchstart' in document.documentElement) {
      $(this).siblings('.dropdown-backdrop').off().remove();
    }
  }, this), 0);
});

通过 github 上的robdodson

【讨论】：

CSS 修复对我不起作用，但确实如此。非常感谢！我正在使用 gem "twitter-bootstrap-rails" gem。
太棒了！我也在使用 twitter-bootstrap-rails gem。尝试了其他几个修复。这个对我有用！伟大的！谢谢！

【解决方案3】：

我已经解决了这个问题。

我的代码在这里

   <li class="dropdown custom open"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> menu<b class="caret"></b></a>
             <ul class="dropdown-menu">
                 <li><a href="#">Sub menu</a></li>
                 <li><a href="#">Sub menu2</a></li>
              </ul>
           </li>

在您的 CSS 文件中添加以下样式。

@media (max-width: 767px) { 
.dropdown.custom:hover .dropdown-menu {
  visibility: visible;
  display:block;
  border-radius:0;

}
}

访问：http://www.s4auto.co.za/

【讨论】：

【解决方案4】：

对我来说，它增加了我的风格：

.dropdown-backdrop {
    z-index:0;
}

几乎和马蒂亚斯一样的答案，我希望它有所帮助。

【讨论】：

我不得不使用 z-index: -1 让它工作（BS. 3.3.7）

【解决方案5】：

通常的答案似乎都无法解决我们在 Android 上的问题。我们在这里尝试了接受的答案以及一些 javascript hack： Bootstrap Collapsed Menu Links Not Working on Mobile Devices 和 http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/

最终我们发现了关闭发生的位置，并且仅当链接父级或祖父级没有 dropdown-submenu 类时才有条件地调用 clearMenus()

$(document)
.on('click.dropdown.data-api', function (e) {

    //fix start        
    var $parent = $(e.target).parent()
    var $grandparent = $parent.parent()

    if (!$parent.hasClass('dropdown-submenu') && !$grandparent.hasClass('dropdown-submenu')) {        
        clearMenus()
    }

    //clearMenus

    //end fix
})
.on('click.dropdown.data-api', '.dropdown form', function (e) { e.stopPropagation() })
.on('click.dropdown.data-api'  , toggle, Dropdown.prototype.toggle)
.on('keydown.dropdown.data-api', toggle + ', [role=menu]' , Dropdown.prototype.keydown)

}(window.jQuery);

希望有帮助！

【讨论】：

【解决方案6】：

$('.dropdown a').click(function(e) {
      e.preventDefault();
      setTimeout($.proxy(function() {
        if ('ontouchstart' in document.documentElement) {
          $(this).siblings('.dropdown-backdrop ').off().remove();
        }
      }, this), 0);

    });

【讨论】：

【解决方案7】：

试试这个。这对我有用

 @media only screen and (max-width: 768px) {
    .dropdown-menu {
        position: absolute;
    }
 }

【讨论】：