为什么jQuery悬停效果不起作用？

Question

我需要的是为我的下拉菜单提供平滑的悬停效果。

$(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500);不适合我。当鼠标悬停时，效果不起作用。

$(document).ready(function() { 
    // executes when HTML-Document is loaded and DOM is ready 

    // breakpoint and up 
    $(window).resize(function() { 
     if ($(window).width() >= 980) { 
      // when you hover a toggle show its dropdown menu 
      $(".navbar .dropdown-toggle").hover(function() { 
       $(this).parent().toggleClass("show"); 
       $(this).parent().find(".dropdown-menu").toggleClass("show"); 
       $(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500); 
      }); 

      // hide the menu when the mouse leaves the dropdown 
      $(".navbar .dropdown-menu").mouseleave(function() { 
       $(this).removeClass("show"); 
      }); 
      // do something here 
     } 
    }); 
    // document ready 
    //wow.js init 
    new WOW().init(); 
}); 

这是我的HTML标记。我正在使用bootstrap 4最新版本。我能做什么用jQuery的平稳悬停效果或JavaScript

<header class="header_area"> 
    <nav class="navbar navbar-expand-lg navbar-light fixed-top"> 
     <a class="navbar-brand" href="#">Light House</a> 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
       <span class="navbar-toggler-icon"></span> 
       </button> 

     <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
      <ul class="navbar-nav mr-auto"> 
       <li class="nav-item active"> 
        <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="about.html">About</a> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="single.html">Single Post</a> 
       </li> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
         Pages 
        </a> 
        <div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdownMenuLink"> 
         <a class="dropdown-item" href="#">Item 1</a> 
         <a class="dropdown-item" href="#">Item 2</a> 
         <a class="dropdown-item" href="#">Item 3</a> 
         <a class="dropdown-item" href="#">Item 4</a> 
         <a class="dropdown-item" href="#">Item 5</a> 
        </div> 
       </li> 
       <li class="nav-item dropdown"> 
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
         Pages 
        </a> 
        <div class="dropdown-menu animated fadeIn" aria-labelledby="navbarDropdownMenuLink"> 
         <a class="dropdown-item" href="#">Item 1</a> 
         <a class="dropdown-item" href="#">Item 2</a> 
         <a class="dropdown-item" href="#">Item 3</a> 
        </div> 
       </li> 
       <li class="nav-item"> 
        <a class="nav-link" href="contact_us.html">Contact Us</a> 
       </li> 
      </ul> 
      <form class="form-inline my-2 my-lg-0"> 
       <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> 
       <button class="btn btn-outline-success my-2 my-sm-0 search_icon" type="submit"><i class="fa fa-search"></i></button> 
      </form> 
     </div> 
    </nav> 
</header> 

Answer 1

如果你想使用.hover()，这是可以做到像这样：

$(".navbar .navbar-toggler").hover(function(e) { 
    $(".navbar .navbar-collapse").addClass("show").fadeIn(500); 
}, function(e) { 
    $(".navbar .navbar-collapse").removeClass("show").fadeOut(500); 
}); 

这有缺点，一旦当您移动鼠标点击或选择其中一个菜单项时，它将恢复该类并隐藏起来。

我会建议留在.click()所有情况下。

$(".navbar .navbar-toggler").click(function() { 
    $(".navbar .navbar-collapse").toggleClass("collapse show"); 
}); 

工作实例：https://jsfiddle.net/4gas2aok/4/

如果您想保留褪色，使用.fadeToggle()：这将移动和桌面浏览器上工作

$(".navbar .navbar-toggler").click(function() { 
    $dropdown.fadeToggle(500).toggleClass("collapse show"); 
}); 

引导CSS解决了很多的宽度问题已经存在，所以你不需要检查窗口宽度，只需让bootstrap自行处理。

完整的例子：https://jsfiddle.net/4gas2aok/7/

Answer 2

.hover()有两个处理器。鼠标IN和鼠标OUT。

如果您希望定义在鼠标移出时发生的事情，您必须定义处理程序。

element.hover(mouseenter, mouseleave); 

Documentation

所以我建议：

$(".navbar .dropdown-toggle").hover(

    // Mouseenter event handler 
    function() { 
    $(this).parent().toggleClass("show"); 
    $(this).parent().find(".dropdown-menu").toggleClass("show"); 
    }, 

    // Mouseleave event handler 
    function(){ 
    $(this).find(".dropdown-menu").stop(true, true).delay(200).fadeOut(500); 
    } 
);