所以我有一个固定的底部 div，带有 Bootstrap 下拉滚动菜单(如下所示)。问题出在手机iphone 6 safari上。
当您通过单击按钮打开菜单然后再次单击按钮将其关闭时 - 您最终选择了一个应该被溢出隐藏的菜单选项，但在 Safari 上它显然仍在播放。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
body{
position:relative;
}
#fixed-menu {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 8;
}
.scrollable-menu{
height: auto;
max-height: 180px;
overflow-x: hidden;
}
</style>
</head>
<body>
<div id="fixed-menu">
<div class="dropup">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu scrollable-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</body>
</html>
最佳答案
添加这个脚本来模拟触摸和停止传播。
$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) {
e.stopPropagation();
});
关于jquery - Bootstrap 滚动下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35607675/