Как я могу внести некоторые изменения на небольших устройствах без обновления sh страницы?

Question

Я пытаюсь внести некоторые изменения на небольших устройствах (размером менее 767 пикселей), но когда я увеличиваю окно, у меня остаются изменения для небольших устройств. Только когда я обновляю страницу, я получаю то, что хочу.

var screenWidth = jQuery(window).width();

function dropdownTeam() {
  if (screenWidth <= 767) {
    jQuery('.nav-team').unbind().click(function() {
      jQuery('.nav-team .container').slideToggle().css('display', 'block');
      jQuery('.text-now').toggleClass('rotate');
    });
  }
}

dropdownTeam();

jQuery(document).ready(function() {
  window.addEventListener("resize", dropdownTeam, false);
});

Answer 1

Чтобы ответить на комментарии к вопросу, я лично использую обработчик событий медиа-запроса для нескольких ситуаций, таких как добавление или удаление класса, относящегося к ширине области просмотра, без перезагрузки. Это полезно, если пользователь изменяет размер своего браузера, например, чтобы переместить его на другой экран, у него не будет плохого отображения из-за классов, которые не были бы добавлены или удалены, потому что страница изменила размер без перезагрузки.

Итак, чтобы ответить на вопрос, вот код, который я использую для обработки этих событий:

    // media query event handler
      var detectViewPort = function(){
          var viewPortWidth = $(window).width();
       if (viewPortWidth > 767) {
                  // window width is at least 767px
                  $('#wrapper-footer').addClass('fixed-bottom');

 }
     else {
            // window width is less than 768px
          $('#wrapper-footer').removeClass('fixed-bottom');

          }// END media query change
      };

              $(function(){
                detectViewPort();
              });

              $(window).resize(function () {
                 detectViewPort();
              });

Я разрешаю пример добавления / удаления класса, а вы настраиваете его по своему поведению.

Answer 2

Я так и сделал, и работает отлично. я просто переместил var screenWidth в функцию.

function dropdownTeam(){
    var screenWidth = jQuery(window).width();
    if(screenWidth <= 767){
        jQuery('.nav-team .container').css('display', 'none');

        jQuery('.nav-team').unbind().click(function(){
            jQuery('.nav-team .container').slideToggle().css('display', 'block');
            jQuery('.text-now').toggleClass('rotate');
        });

    }else{
        jQuery('.nav-team .container').css('display', 'block');
    }
}

jQuery(function(){
    dropdownTeam();
});

jQuery(window).resize(function(){
    dropdownTeam();
});