时间戳

首页 > 解决方案 > 有没有办法在屏幕调整大小时关闭导航下拉菜单？

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

问题描述

我有一个引导程序 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=“#”&gt;Sub Page</a>
        <a class="dropdown-item" href=“#”&gt;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”&gt;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=“#”&gt;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');
});

标签： javascriptjqueryhtmlcss

解决方案

您可以在窗口上侦听调整大小事件：

window.addEventListener('resize', (e)=>{
    // ... call your show/hide here.
    // ... and/or check new width and do logic on this.
});

推荐阅读