Функция изменения размера окна jquery запускается только один раз, а не при каждом изменении размера.

Question

Я пытаюсь настроить функцию jquery, которая проверяет ширину окна, чтобы панель навигации работала правильно. Я хочу, чтобы это произошло: если ширина экрана больше чем 949px, инициируйте функцию, которая наводит курсор на ссылку привязки .dropdown, открывает подменю выпадающего меню; если ширина экрана меньше или равна, что 949px, удалите эту функцию, чтобы нажимать ссылку привязки .dropdown, чтобы открыть выпадающее подменю (раскрывающиеся ссылки открываются по умолчанию при нажатии на них - я думаю это компонент начальной загрузки).

Я создал несколько функций, основанных на некоторых похожих примерах, найденных в stackoverflow, но обнаружил, что функция запускается только после того, как ширина экрана превысила 949 пикселей, поэтому при меньших ширинах анкеры .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 и ниже?

Answer 1

Вместо добавления и удаления привязок, просто установить событие связывания и проверить размер, прежде чем делать что-нибудь:

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

Если добавить и удалить обработчик события, вы должны предотвратить это делать два раза (например, они изменить размер до 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

probaply не совершенны, так как 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"); 
    } 
}); 

Имейте в виду, что эта реализация будет удалять любые другие существующие MouseEnter и MouseLeave обработчики событий на .dropdown элементов, а также ,

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>