twitter-bootstrap 下拉菜单不适用于移动设备
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17579750/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Drop-Down Menu not working on mobile devices
提问by maddo7
The most recent version of twitter bootstrap (2.3.2) does seem to have a problem with drop down menus on mobile devices.
最新版本的 twitter bootstrap (2.3.2) 似乎在移动设备上的下拉菜单有问题。
When you click on a drop-down menu item after opening the menu, the menu simply closes and no link gets clicked. You can see this on their sample page here: http://twitter.github.io/bootstrap/examples/hero.html
当您在打开菜单后单击下拉菜单项时，菜单只会关闭并且不会单击任何链接。你可以在他们的示例页面上看到这个：http: //twitter.github.io/bootstrap/examples/hero.html
I found an issue posted at their github page but no solution: https://github.com/twitter/bootstrap/issues/7927
我在他们的 github 页面上发现了一个问题，但没有解决方案：https: //github.com/twitter/bootstrap/issues/7927
Does anybody know the trick to fix it?
有人知道修复它的技巧吗？
回答by maddo7
A temporary fix is to add
临时修复是添加
.dropdown-backdrop{
position: static;
}
to the css file.
到 css 文件。
回答by Ryan
回答by Raúl Contreras
For me, it worked adding to my styles:
对我来说，它可以添加到我的风格中：
.dropdown-backdrop {
z-index:0;
}
almost the same answer as Matthias, i hope it helps.
与马蒂亚斯的答案几乎相同，我希望它有所帮助。
回答by Julian Dormon
None of the usual answers seemed to fix our problem on Android. We tried the accepted answer here and a few javascript hacks as well: Bootstrap Collapsed Menu Links Not Working on Mobile Devicesand http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/
通常的答案似乎都不能解决我们在 Android 上的问题。我们在这里尝试了可接受的答案以及一些 javascript 技巧： Bootstrap Collapsed Menu Links Not Working on Mobile Devices和 http://alittlecode.com/fix-twitter-bootstraps-dropdown-menus-in-touch-screens/
Ultimately we discovered where the close was occurring and conditionally called clearMenus()only if the links parent or grand parent did not have dropdown-submenuclass
最终，我们发现了关闭发生的位置，并且clearMenus()只有在链接父级或祖父dropdown-submenu级没有类时才有条件地调用
$(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);
Hope that helps!
希望有帮助！
回答by Binilsh K.B
I have fixed this issue.
我已经解决了这个问题。
My code is here
我的代码在这里
<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>
Add following style in your CSS fie.
在您的 CSS 文件中添加以下样式。
@media (max-width: 767px) {
.dropdown.custom:hover .dropdown-menu {
visibility: visible;
display:block;
border-radius:0;
}
}
Visit: http://www.s4auto.co.za/
回答by Chow927
Try this. It's work for me
试试这个。这对我有用
@media only screen and (max-width: 768px) {
.dropdown-menu {
position: absolute;
}
}
回答by AS Sayem
$('.dropdown a').click(function(e) {
e.preventDefault();
setTimeout($.proxy(function() {
if ('ontouchstart' in document.documentElement) {
$(this).siblings('.dropdown-backdrop ').off().remove();
}
}, this), 0);
});
