javascript - 有没有办法在屏幕调整大小时关闭导航下拉菜单？

Question

我有一个 bootstrap 4 导航栏/下拉菜单，在桌面上它们以 css 动画/淡入打开。在移动设备上我让它们以单独的“切换”按钮打开。一切都按预期工作，但是如果我在移动设备上打开下拉菜单，然后调整窗口屏幕的大小，下拉菜单将保持打开状态，并且不能很好地播放动画。有没有办法在窗口调整大小或到达桌面断点时关闭下拉菜单？

HTML:

<ul class="navbar-nav">
<li class="nav-item dropdown">
    <div class="nav-title-flex-container">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href=“home.html"
           id="navbar-drop-downs"
           aria-haspopup="true" aria-expanded="false">
            <span class="underline"> Home</span>
        </a>
        <span class="openNav"><i class="fa fa-angle-right"></i></span>
    </div>

    <div class="dropdown-menu dropdown-menu-nav-bottom"
         aria-labelledby="navbar-drop-downs">
        <a class="dropdown-item" href=“#”>Sub Page</a>
        <a class="dropdown-item" href=“#”>Sub page</a>
    </div>
</li>
<li class="nav-item dropdown">
    <div class="nav-title-flex-container">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="how-to-be-vocal.html"
       id="navbar-drop-downs"
       aria-haspopup="true" aria-expanded="false">
        <span class="underline”>About </span>
    </a>
        <span class="openNav"><i class="fa fa-angle-right"></i></span>
    </div>
    <div class="dropdown-menu dropdown-menu-nav-bottom"
         aria-labelledby="navbar-drop-downs">
        <a class="dropdown-item" href=“#”>Sub Page</a>
    </div>
</li>
</ul>

CSS:

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


@media (min-width: 1199px) {
  .dropdown:hover > .dropdown-menu {
    display: block;
    z-index: 100;
    position: absolute;
    animation: fadein .7s;
  }
}

jquery:(切换下拉菜单/移动)

  $openNavToggle.on('click', function () {
  $(this).parent().next('.dropdown-menu-nav-bottom').toggleClass('show');
  $(this).find('i').toggleClass('fa-angle-right--active');
});

Answer 1

您可以使用 jQuery 的 resize 事件处理程序。

您还需要确保您正在删除这些类，而不仅仅是切换它们 - 否则导航可能会在调整大小时出现；

$openNavToggle.resize(function () {
  $(this).parent().next('.dropdown-menu-nav-bottom').removeClass('show');
  $(this).find('i').removeClass('fa-angle-right--active');
})

此外，您可以使用有点去抖动来确保调整大小功能仅在调整大小结束时生效，如下所示:

let resizeEvent;
$openNavToggle.resize(function () {
  clearTimeout(resizeEvent);
  resizeEvent = setTimeout(() => {
    $(this).parent().next('.dropdown-menu-nav-bottom').removeClass('show');
    $(this).find('i').removeClass('fa-angle-right--active');
  }, 300);
})