Question

所以我有一个带有bootstrap dropup滚动菜单的固定底部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>

Answer 1

添加此脚本以模拟touch和stopPropagation。

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

Bootstrap滚动下拉菜单

1 个答案: