Javascript заставляет мобильную навигацию требовать двойного нажатия, чтобы ссылки работали - PullRequest
Новая
       10

Javascript заставляет мобильную навигацию требовать двойного нажатия, чтобы ссылки работали

0 голосов
/ 01 сентября 2018

В мобильной версии (iOS) моего веб-сайта я заметил, что для основной навигации требуется двойное нажатие на ссылки, чтобы страница перенаправлялась. После удаления различных стилей / фрагментов кода я нашел причину проблемы, это мой Javascript для эффекта наведения «скользящая линия».

Мое основное понимание состоит в том, что, поскольку скрипт все еще работает на мобильном устройстве, когда он на самом деле не нужен, это означает, что навигация запущена / ожидает эффекта зависания, и после запуска вы можете щелкнуть ссылку, как и собирались?

Сценарий отлично работает на рабочем столе, поэтому я не хочу менять какие-либо функции, но есть ли что-то, что я могу добавить, чтобы предотвратить эту ошибку на мобильных устройствах? В качестве альтернативы, будет ли лучше использовать тип javascript 'media query', не позволяющий скрипту работать ниже 1000px? Если да, то как лучше всего это осуществить?

Спасибо заранее!

CodePen: https://codepen.io/moy/pen/pZdjMX

$(function() {
  var $el,
    leftPos,
    newWidth,
    $mainNav = $(".site-nav__list");

  $mainNav.append("<div class='site-nav__line'></div>");
  var $magicLine = $(".site-nav__line"),
    $currentMenu = $(".current-menu-item");

  $magicLine
    .width($currentMenu.length ? $currentMenu.width() : 0)
    .css("left", $currentMenu.length ? $currentMenu.find("a").position().left : 0)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

  var hoverOut;

  $(".site-nav__list li a").hover(function() {
      clearTimeout(hoverOut);

      $el = $(this);
      leftPos = $el.position().left;
      newWidth = $el.parent().width();

      if (!$magicLine.width()) {
        $magicLine.stop().hide().css({
          left: leftPos,
          width: newWidth
        }).fadeIn(100);
      } else {
        $magicLine.stop().animate({
          opacity: 1,
          left: leftPos,
          width: newWidth
        });
      }
    },
    function() {
      hoverOut = setTimeout(function() {
        if (!$currentMenu.length) {
          $magicLine.fadeOut(100, function() {
            $magicLine.css({
              left: $magicLine.data("origLeft"),
              width: $magicLine.data("origWidth")
            });
          });
        } else {
          $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
          });
        }
      }, 100);
    }
  );
});
/* Header */

.page-head {
  background: white;
  border-top: 2px solid #ddd;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 30px;
  position: relative;
  width: 100%;
}

.page-head__logo {
  background-image: none;
  float: left;
  padding: 0;
  text-shadow: none;
  width: 200px;
}


/* Nav */

.site-nav {
  display: block;
  float: right;
  text-align: center;
  width: auto;
}

.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  top: auto;
  left: auto;
  width: auto;
}

.site-nav__list li {
  background: none;
  display: block;
  float: left;
  margin: 0;
  padding-left: 0;
  text-transform: uppercase;
}

.site-nav__list a {
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  padding: 30px 15px;
  transition: color .15s;
  text-shadow: none;
}

.site-nav__list a {
  color: red;
}

/* Underline */

.site-nav__line {
  background: red;
  content: "";
  display: block;
  height: 2px;
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <header class="page-head">

      <a href="#" class="page-head__logo">Logo Here </a>

      <nav class="site-nav ">
          <ul class="site-nav__list">
            <li class="site-nav__item "><a href="#" class="site-nav__link">About</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">Looooonger Title</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">Company</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">About</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link">Login</a></li>
            <li class="site-nav__item"><a href="#" class="site-nav__link amp">Apply</a></li>
          </ul>
    </nav>

  </header>
</body>

Ответы [ 2 ]

0 голосов
/ 01 сентября 2018

, если ваша проблема заключается в том, что вы дважды щелкнете по нему перед перенаправлением на его страницу, попробуйте thi 

$('.site-nav__list a').click(function(){
$(this).click();

});

функция заключается в том, что при нажатии на навигацию скрипт снова щелкает по ней,

0 голосов
/ 01 сентября 2018

Если вы уверены, что причиной проблемы является запуск этого сценария на экранах мобильных устройств, вы можете вызывать скользящий сценарий только на рабочих столах с этим кодом: 

if ( $(window).width() > 739) {      
//Desktop scripts
} 
else {
  //mobile scripts
}

Вы можете изменить ширину экрана устройств, с которыми вы хотите работать в сценарии, изменив 739. После этого ваш скрипт будет работать только на экранах размером более 739 пикселей или по вашему выбору.

Обновление

Если вы хотите, чтобы после изменения размера все работало правильно, сделайте небольшой трюк.

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

window.onresize = function () {
    location = location;
}

Вам просто нужно добавить эти строки в конец вашего файла скрипта. После изменения размера все снова будет хорошо работать.

Как это работает?

Когда вы изменяете размер окна, генерируется событие javascript. В последнем коде мы переопределили прослушиватель этого события. Поэтому, когда пользователь изменит размер окна, код location = location; будет выполнен.

Что означает эта строка? объект location является свойством объекта window и хранит информацию о текущем URL окна. Когда вы изменяете location window, страница браузера перезагружается и получает новый window нового location ( больше информации о местоположении ).

То, что мы здесь сделали, это присвоение location текущего location. Поэтому браузер считает, что у нас есть запрос на перенаправление, и перезагружает страницу. Но поскольку новый location является тем же объектом, что и предыдущий, страница будет перезагружаться вместо перенаправления в другое место.

...