jquery window resize funktioniert nur einmal statt bei jeder Größenänderung

Question

Ich versuche eine jquery-Funktion einzurichten, die die Fensterbreite überprüft, damit eine Navigationsleiste richtig funktioniert. Was ich möchte, ist dies: Wenn die Bildschirmbreite größer als 949px ist, initiiere eine Funktion, die das Schweben auf einem .Dropdown-Anker-Link öffnet ein Dropdown-Untermenü öffnen; Wenn die Bildschirmbreite kleiner oder gleich 949px ist, entfernen Sie diese Funktion, sodass der .dropdown-Ankerlink angeklickt werden muss, um das Dropdown-Untermenü zu öffnen (die standardmäßig geöffneten Dropdown-Links beim Anklicken) Dies ist eine Bootstrap-Komponente).

Ich habe ein paar Funktionen basierend auf einigen ähnlichen Beispielen erstellt, die ich auf stackoverflow gefunden habe, aber festgestellt, dass die Funktion nur auslöst, wenn die Bildschirmbreite 949px überschritten hat. Bei kleineren Breiten öffnen die .dropdown-Anker noch Untermenüs per Hover was ich nicht will.

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

Wie kann ich diese Funktion verbessern, so dass die .dropdown Hover-Funktionalität bei Breiten über 949px und entfernt bei 949px und unten hinzugefügt wird?

Answer 1

Anstatt das Hinzufügen und Bindungen zu entfernen, schaffen nur die Ereignisbindung und die Größe überprüfen, bevor Sie etwas tun:

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

Wenn Sie den Event-Handler hinzufügen und entfernen, müssen Sie zweimal tun, es zu verhindern (zB sie Ändern Sie die Größe auf 980 und ändern Sie dann die Größe auf 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

probaply nicht perfekt, da jquery nicht meine Stärke ist, aber es macht den Job:

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

Beachten Sie, dass diese Implementierung als auch alle anderen bestehenden MouseEnter- und mouseleave-Ereignishandler auf den .dropdown Elemente entfernen wird .

Answer 3

Mein Vorschlag ist (um zu vermeiden, mehrmals das gleiche Ereignis zu binden):

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>