Bootstrap 滚动下拉菜单答案

【问题标题】：Bootstrap scrolling drop up menuBootstrap 滚动下拉菜单
【发布时间】：2016-02-24 16:30:15
【问题描述】：

所以我有一个带有引导下拉滚动菜单的固定底部 div（如下所示）。问题出在手机 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>

【问题讨论】：

标签： jquery html css twitter-bootstrap mobile-safari

【解决方案1】：

添加此脚本以模拟触摸和停止传播。

$('body').on('touchstart.dropdown', '.dropdown-menu', function (e) { 
    e.stopPropagation(); 
});

【讨论】：