jqueryウィンドウのサイズ変更機能のみすべてのサイズ変更の代わりに1回トリガー

Question

ナビゲーションバーが正しく機能するようにウィンドウ幅をチェックするjquery関数を設定しようとしています。スクリーン幅がの場合は、が949pxより大きい場合は、.dropdownアンカーリンク上にホバーすると、ドロップダウンメニューが開きます。画面の幅がで、が949px以下の場合は、その機能を削除してドロップダウンメニューを開くために.dropdownアンカーリンクをクリックする必要があります（ドロップダウンメニューはクリックするとデフォルトで開きますこれはブートストラップコンポーネントです）。

私はstackoverflowで見つかったいくつかの同様の例に基づいていくつかの関数を作成しましたが、画面幅が949pxを超えると関数がトリガすることがわかりましたので、.dropdownアンカーはホバー私が望んでいないもの。

var width = $(window).width(); 
$(window).resize(function(){ 
    if($(this).width()>949){ 
    $(".dropdown").hover(function(){ 
     $(this).addClass("open"); 
    }, 
    function(){ 
     $(this).removeClass("open"); 
    }); 
    } 
}); 

.dropdownホバー機能が949px以上の幅で添加し、949px以下で除去されるように、どのように私は、この機能を向上させることができますか？

probaply

Answer 1

よりもむしろバインディングの追加と削除、ちょうど何かを行う前に、イベントが結合確立し、サイズをご確認ください：

$(".dropdown").hover(function() { 
    if ($(window).width() > 949) { 
     $(this).addClass("open"); 
    } 
}, function() { 
    if ($(window).width() > 949) { 
     $(this).removeClass("open"); 
    } 
}); 

あなたはイベントハンドラを追加したり削除した場合、あなたはそれを2回やって防ぐ必要がある（例えば、それらは、 980にサイズ変更して1050にサイズ変更します）。

var hover_added = false; 

$(window).resize(function() { 
    var width = $(this).width(); 
    if (width > 949 && !hover_added) { 
     $(".dropdown").on({ 
      mouseenter: function() { 
       $(this).addClass("open"); 
      }, 
      mouseleave: function() { 
       $(this).removeClass("open"); 
      } 
     }); 
     hover_added = true; 
    } else if (width <= 949 && hover_added) { 
     $(".dropdown").off("mouseenter mouseleave"); 
     hover_added = false; 
    } 
}); 

Answer 2

ない完璧な、jqueryのは私の得意ではありませんが、それは仕事をしていませんので、：

var width = $(window).width(); 
$(window).resize(function(){ 
    if($(this).width()>949){ 
    $(".dropdown").on({ 
     mouseenter: function() { 
      $(this).addClass("open"); 
     }, 
     mouseleave: function() { 
      $(this).removeClass("open"); 
     } 
    }); 
    } 
    else{ 
    $(".dropdown").off("mouseenter"); 
    $(".dropdown").off("mouseleave"); 
    } 
}); 

は、この実装は、同様.dropdown要素に関する他の既存のMouseEnterとmouseleaveイベントハンドラを削除することに注意してください。

Answer 3

私の提案は（回以上同じイベントをバインドすることを避けるために）ある：

var width = $(window).width(); 
 

 
$(window).on('resize', function(e) { 
 
    doResize(e); 
 
}); 
 

 
function doResize(e) { 
 
    if ($(this).width()>949) { 
 
    var isOpenOnHover = $('.dropdown-toggle').data('isOpenOnHover'); 
 
    if (isOpenOnHover) { 
 
     return; 
 
    } 
 
    $('.dropdown-toggle').data('isOpenOnHover', true); 
 
    $('.dropdown-toggle').hover(function() { 
 
     $('.dropdown-toggle').trigger('click.bs.dropdown'); 
 
    }); 
 
    } else { 
 
    $('.dropdown-toggle').data('isOpenOnHover', false); 
 
    $('.dropdown-toggle').off('mouseenter mouseleave'); 
 
    } 
 
} 
 

 
$(function() { 
 
    $('.dropdown-toggle').data('isOpenOnHover', false); 
 
    doResize(); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 

 

 
<div class="bs-example"> 
 
    <div class="dropdown"> 
 
     <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
     </ul> 
 
    </div> 
 
</div>