Медиа-запросы Javascript: как запустить скрипт в соответствии с шириной экрана? - PullRequest
Новая
       16

Медиа-запросы Javascript: как запустить скрипт в соответствии с шириной экрана?

0 голосов
/ 28 октября 2018

Я сейчас занимаюсь разработкой веб-сайта, и у меня возникла проблема с отзывчивостью.

Я построил свое меню и хотел бы, чтобы подменю появлялось после наведения на экран, когда ширина экрана превышает 980px.Ниже этой ширины я бы хотел, чтобы пользователь нажимал на меню до появления подменю.

Вот мой HTML-код 

<nav>
<ul class="menulist">
    <li class="list-item"><a href="">list-item 1</a></li>
    <li class="list-item"><a href="">list-item 2</a></li>
    <li class="list-item"><a href="">list-item 3</a>
        <a href="#"></a>
        <ul class="sub-menu">
            <li class="list-item"><a href="">list-item 4</a></li>
            <li class="list-item"><a href="">list-item 5</a></li>
        </ul>
    </li>
</ul>

Я пыталсясделать это таким образом 

if (window.matchMedia("(max-width: 980px)").matches) {
  $('.list-item > .sub-menu').parent().click(function() {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
    });
} else {
  $('.list-item > .sub-menu').parent().hover(function() {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
    });
}

И также таким образом, 

if ($(window).width() < 981) {
    $('.list-item > .sub-menu').parent().click(function() {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
    });
}
else {
    $('.list-item > .sub-menu').parent().hover(function() {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
    });
}

Но это не работает.

На самом деле поведение не меняется, когда яизменить размер моего браузера.Когда я загружаю сайт на мобильный (ширина <981), он сначала работает нормально.Я нажимаю на ссылки, прежде чем открыть подменю.Но когда я расширяю браузер, поведение не меняется.Мне нужно снова щелкнуть ссылки, прежде чем открываются подменю. </p>

То же самое происходит при загрузке на широком экране.Наведение работает нормально.И когда я уменьшаю экран, он не дает щелчку работать, наведение продолжает работать.

Кто-то может мне помочь, пожалуйста?Спасибо.

1 Ответ

0 голосов
/ 28 октября 2018

Ваша логика "если" не в том месте.Ваш код говорит: «Если ширина соответствует, то установите один обработчик события, в противном случае установите другой обработчик события».Это «если» условие будет оцениваться только на начальный размер окна.Если вы хотите, чтобы это работало правильно, когда пользователь изменяет размер окна, вам необходимо безоговорочно установить оба обработчика событий, а затем поместить условие «if» в функцию обработчика событий.Например, внутри обработчика события «hover», если ширина <981, тогда ничего не делать, пока не появится меню.Вот пример того, как может выглядеть код (не проверено): </p> 

$('.list-item > .sub-menu').parent().click(function() {
   if (window.matchMedia("(max-width: 980px)").matches) {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
   }
});
$('.list-item > .sub-menu').parent().hover(function() {
   if (!window.matchMedia("(max-width: 980px)").matches) {
      var submenu = $(this).children('.sub-menu');
      if ( $(submenu).is(':hidden') ) {
        $(submenu).slideDown(200);
      } else {
        $(submenu).slideUp(200);
      }
   }
});
...