Question

我设计了一个包含Bootstrap 4 Beta的页面。我有一个导航栏（固定顶部），其中包含一个下拉菜单。我想在滚动页面时切换此菜单，因此它会产生以下行为：

如果滚动到页面顶部，请打开下拉菜单
否则关闭它
仅当导航栏未折叠（由响应断点引起）时才会出现此效果
菜单应由用户保持可切换

＆＃13;

// Closing or opening Dropdown, when window is scrolled
$(window).scroll(function() {
  if ($("#mobile-only").is(':hidden')) {
    if ($(window).scrollTop() === 0) {
      $("#example-dropdown").dropdown('toggle');
    }
  }
});

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top navbar-expand-sm navbar-dark bg-primary">
  <!--...-->
  <ul class="navbar-nav">
    <li class="nav-item">
      <div id="example-dropdown" class="dropdown">
        <a id="example-dropdown-link" class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
        <div class="dropdown-menu" aria-labelledby="example-dropdown-link">
          <a class="dropdown-item" href="#">Item1</a>
          <a class="dropdown-item" href="#">Item2</a>
        </div>
      </div>
    </li>
  </ul>
</nav>
<div id="mobile-only" class="row d-sm-none">
  <!--...-->
</div>
<div style="height:1000px;">
  <p>Dummy Container to generate scrollbar</p>
</div>

＆＃13;

修改：我添加了我的方法。它可以运行。

仅当仅移动设备div不可见时，事件才会触发。校验！
当我滚动到页面顶部时，下拉列表打开。检查！
如何关闭它？ Bootstrap似乎没有为此提供功能。
此外，一旦触发，Dropdown就不能再手动切换

如何通过滚动切换下拉列表

0 个答案: