爲什麼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); 
    } 
);