javascript - 下拉悬停在窗口调整大小时启用/禁用

Question

我希望下拉菜单在悬停时打开，前提是窗口大于 767 像素。我试图在页面加载和窗口调整大小时调用一个函数，并使用宽度大小条件。 enableHover() 函数仅适用于页面加载，不适用于窗口调整大小。

codepen

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">dropdown link</a>
          <a class="dropdown-item" href="#">dropdown link</a>
          <a class="dropdown-item" href="#">dropdown link</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

jQuery(document).ready(function($) {
    //call dropdown hover and on load & resize
    $( window ).resize(function() {
        enableHover();
    });
    enableHover();
});

//emable hover when window > 767px 
function enableHover() {
   if ($(window).width() > 767) {
      $('nav.navbar li.dropdown').hover(function() {
         $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
       }, function() {
         $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
         });
       }
    }

Answer 1

您需要取消绑定(bind)悬停操作。您的 .resize 函数正在运行，但没有任何东西可以从下拉列表中删除悬停操作。添加如下内容:

function enableHover() {
    if ($(window).width() > 767) {
        $('nav.navbar li.dropdown').hover(function() {
              $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
            }, function() {
              $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
        });
    } else {
        $('nav.navbar li.dropdown').unbind('mouseenter mouseleave')
    }
}

这是一个可用的代码笔:

https://codepen.io/egerrard/pen/qPyYwR

或者更简单的解决方案是仅使用 css:

@media (min-width: 768px) { 
.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; 
 }
}
@media (max-width: 767px) { 
.dropdown:hover .dropdown-menu
    display: none;
    margin-top: auto; 
}

在这里查看它的实际效果:

https://codepen.io/egerrard/pen/OxwwKm