Хобрук: Ваш путь к мастерству в программировании

Перезагрузить скрипт jquery после изменения размера дисплея

У меня проблема со скриптом jquery, если размер страницы был изменен. Например, если вы откроете сайт на телефоне, затем откроете и закроете меню, затем повернете телефон из вертикального положения в горизонтальное и снова откроете меню, блок не будет отображаться.

я использую этот скрипт

return $(document).ready(function() {
  (function($) {
    if ($(window).width() < 960) {
      $('#header-menu').css('display', 'none');
      $('header.grid-container').css('display', 'none');
      return $('#toggle-mobile-menu').click(function() {
        $('#header-menu').toggle();
        return $('header.grid-container').toggle();
      });
    }
  })(jQuery);
});

Возможно, мне нужен какой-то хук, чтобы перезагрузить скрипт, если экран был изменен, без перезагрузки страницы. Я пытался использовать $(window).resize(), но это не сработало.

javascript html jquery css resize
21.05.2015

Ответы:


1

Невозможно, чтобы Jquery попал в DOM и потребовал бы обновления страницы, чтобы скрипт изменился.

Вместо этого вам следует рассмотреть возможность использования AJAX.

21.05.2015
  • Вы бы обновили страницу. 21.05.2015
  • спасибо, ладно попробую решить с AJAX, или найду другой способ. Спасибо за ваш ответ 21.05.2015
  • У вас не должно возникнуть проблем с решением с помощью AJAX, удачи 21.05.2015

    • 2

    Проблема в том, что ваш скрипт запускается только один раз после загрузки всех элементов DOM (вы проверяете ширину экрана, и если условие выполнено, вы запускаете событие). Я предлагаю перенести стили в CSS (медиа-запросы) и использовать jquery только для привязки событий.

    CSS

    @media (max-width: 960px) {
    #header-menu,
    .grid-container { display: none; }

    #toggle-mobile-menu { display: block; } // or whatever
}

    JS

    $(function(){
    $('#toggle-mobile-menu').on('click', function() {
        $('#header-menu').toggle();
        $('header.grid-container').toggle();
    }
});
    21.05.2015
    Новые материалы
    Библиотеки PyTorch и Python для машинного обучения: приложения в здравоохранении с обнимающим лицом…
    В сфере машинного обучения Python выделяется благодаря своей универсальности и набору предлагаемых библиотек. Развитие машинного обучения в здравоохранении можно частично объяснить простотой и..
    «Что за…» очень хорошо представляет мое выражение лица после того, как я увидел это!
    «Что за…» очень хорошо представляет мое выражение лица после того, как я увидел это!
    5 вещей, которые я сделал, чтобы стать профессиональным разработчиком JavaScript
    Чтобы стать профессиональным JS-разработчиком: 1. Практикуйтесь в рутине, 2. Работайте над проектами, 3. Придерживайтесь одного языка, 4. Наблюдайте за чужим кодом, 5. Будьте последовательны..
    От теории к практике: пошаговое руководство по реализации наивного Байеса
    Вы когда-нибудь застревали в проекте классификации, не зная, как точно предсказать результаты для ваших данных? Вы искали более простой и интуитивно понятный алгоритм, который поможет вам достичь..
    #093 | Моделирование вспышки эпидемии с помощью JavaScript — Часть 3
    TLDR: Я сделал симуляцию вспышки эпидемии, в которую можно поиграть здесь . Мой холст, моя сцена Мой HTML — это всего лишь один div с классом stage, и вот как я настроил на нем свой объект..
    numberToString.js (8kyu 16)
    Алгоритм кодовых войн Проблема Нам нужна функция, которая может преобразовать число в строку. 숫자를 문자열로 변환하는 함수를 작성해라. Решение 01 function numberToString(n) { return n.toString(); }..
    Лучшие практики для быстрого изучения языка программирования
    Изучение языка программирования может быть сложной задачей, но при правильном подходе определенно возможно быстро выучить язык программирования. Хорошее понимание языка программирования может..