ドロップダウン・ホバーの有効化/無効化ウィンドウのサイズ変更

Question

ウィンドウが767pxより大きい場合にのみ、ホバー上でドロップダウンを開くことを希望します。私は、ページの読み込み時に関数を呼び出すと、幅のサイズの条件でウィンドウのサイズを変更しようとしています。 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

。 .resize機能は動作していますが、ホバーアクションをドロップダウンから削除するものはありません。作業codepen

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; 
} 

は、アクションでそれを参照してくださいのようなものを追加します。ここ：