正常懸停並點擊小設備的jQuery引導程序下拉引導3

Question

我正在使用Bootstrap典型的nav下拉菜單。

我希望下拉菜單顯示在鼠標懸停上並隱藏在鼠標上。但是當設備寬度小於979px時，我希望下拉菜單顯示在點擊上而不是懸停上。

我寫了一些jQuery來實現這一點。它工作正常，但是當我將瀏覽器寬度減少到979px以下時，它會顯示懸停時的下拉菜單。我希望這隻能顯示點擊下拉。具有諷刺意味的是，如果我保持瀏覽器寬度低於979px，那麼它不會顯示懸停。

我的jQuery：

$(document).ready(function() { 
    if ($(window).width() < 979) { 
    $(".md-nav ul.nav li.dropdown").click(function() { 
     $('li.dropdown > a').addClass('dropdown-toggle'); 
     $('li.dropdown > a').attr('data-toggle','dropdown'); 

    }); 
    } 

    if ($(window).width() > 979) { 
     $(".md-nav li.dropdown").hover(function() { 
      $(".md-nav li.dropdown:hover > .dropdown-menu").stop(true,true).delay(400).show(0); 
     }, function() { 
      $(".md-nav li.dropdown:hover > .dropdown-menu").stop(true,true).delay(500).hide(0); 
     }); 
    } 

    }); 

我的HTML爲導航：

<nav class="navbar navbar-default md-nav" role="navigation"> 
    <div class="container-fluid"> 
     <select class="nav-sel"> 
      <option value="Vous Etes">Vous Etes</option> 
      <option value="Vous Etes">Vous Etes</option> 
      <option value="Vous Etes">Vous Etes</option> 
      <option value="Vous Etes">Vous Etes</option> 
     </select> 

     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
      <span class="sr-only"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav nav nav-tabs"> 
       <li class="dropdown"><a href="#">Ministére</a> 
        <div class="dropdown-menu"> 
         <ul> 
          <li><a href="#">Promotion</a></li> 
          <li><a href="#">Prévention</a></li> 
          <li><a href="#">Les Féderations</a></li> 
          <li><a href="#">Le diréct</a></li> 
          <li><a href="#">Emplois & Mériers</a></li> 
          <li><a href="#">Grand Evénements</a></li> 
         </ul> 
         <img src="img/athlete-img1.jpg" alt="athlete running" /> 
        </div> 
       </li> 
       <li class="dropdown"><a href="#">Sport</a> 
        <div class="dropdown-menu"> 
         <ul> 
          <li><a href="#">Promotion</a></li> 
          <li><a href="#">Prévention</a></li> 
          <li><a href="#">Les Féderations</a></li> 
          <li><a href="#">Le diréct</a></li> 
          <li><a href="#">Emplois & Mériers</a></li> 
          <li><a href="#">Grand Evénements</a></li> 
         </ul> 
         <img src="img/athlete-img1.jpg" alt="athlete running" /> 
        </div> 
       </li> 
       <li class="dropdown"><a href="#">Jeunesse</a> 
        <div class="dropdown-menu"> 
         <ul> 
          <li><a href="#">Promotion</a></li> 
          <li><a href="#">Prévention</a></li> 
          <li><a href="#">Les Féderations</a></li> 
          <li><a href="#">Le diréct</a></li> 
          <li><a href="#">Emplois & Mériers</a></li> 
          <li><a href="#">Grand Evénements</a></li> 
         </ul> 
         <img src="img/athlete-img1.jpg" alt="athlete running" /> 
        </div> 
       </li> 
       <li class="dropdown"><a href="#">Publications</a> 
        <div class="dropdown-menu"> 
         <ul> 
          <li><a href="#">Promotion</a></li> 
          <li><a href="#">Prévention</a></li> 
          <li><a href="#">Les Féderations</a></li> 
          <li><a href="#">Le diréct</a></li> 
          <li><a href="#">Emplois & Mériers</a></li> 
          <li><a href="#">Grand Evénements</a></li> 
         </ul> 
         <img src="img/athlete-img1.jpg" alt="athlete running" /> 
        </div> 
       </li> 
       <li class="dropdown"><a href="#">Mediatheque</a> 
        <div class="dropdown-menu"> 
         <ul> 
          <li><a href="#">Promotion</a></li> 
          <li><a href="#">Prévention</a></li> 
          <li><a href="#">Les Féderations</a></li> 
          <li><a href="#">Le diréct</a></li> 
          <li><a href="#">Emplois & Mériers</a></li> 
          <li><a href="#">Grand Evénements</a></li> 
         </ul> 
         <img src="img/athlete-img1.jpg" alt="athlete running" /> 
        </div> 
       </li> 
       <li><a href="#">Espace Medias</a></li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </div><!-- /.container --> 
</nav> 

Answer 1

這是因爲當前的邏輯如下：

1. 檢查屏幕尺寸（寬）
2. 創建事件處理程序click如果width小於979
3. 創建事件處理程序hover如果width大於979

哪個，總之，是指當你打開的頁面寬度檢查只執行一次，並且相應地附加事件處理程序。爲了克服這個問題，我建議用另一種邏輯：

1. 添加事件處理程序click和上點擊hover
2. 如果瀏覽器的寬度小於979px顯示下拉
3. 上懸停，如果瀏覽器的寬度大於（或等於）979px顯示下拉

的Javascript

$(".md-nav ul.nav li.dropdown").click(function() { 
    if ($(window).width() < 979) { 
     $('li.dropdown > a').addClass('dropdown-toggle'); 
     $('li.dropdown > a').attr('data-toggle','dropdown');    
    } 
}); 

$(".md-nav li.dropdown").hover(function() { 
    if ($(window).width() >= 979) { 
     $(".md-nav li.dropdown:hover > .dropdown-menu").stop(true,true).delay(400).show(0); 
    } 
}, function() { 
    if ($(window).width() >= 979) { 
     $(".md-nav li.dropdown:hover > .dropdown-menu").stop(true,true).delay(500).hide(0); 
    } 
}); 

另一種方法是按照你的邏輯，並根據瀏覽器的寬度附加給定的事件處理程序，這在每次調整瀏覽器窗口時刷新：

的Javascript

$(window).on('resize', function (e) { 
    // reattach event handler if necessary 
}); 

請但是，請記住，通過這種方法，您需要刪除以前的事件處理程序，否則它們將堆疊在彼此之上。