Question

我在网站的移动版本（iOS）上注意到，主导航需要两次点击链接才能重定向页面。删除各种样式/位的代码后，我发现了问题的原因，这是我的Javascript产生的“滑行”悬停效果。

我的基本理解是，由于脚本仍在移动设备上运行，因此在不需要时，它意味着导航正在运行/正在预期悬停效果，一旦运行，您就可以按需要单击链接了吗？< / p>

该脚本在桌面上可完美运行，因此我不想更改任何功能，但是可以添加一些内容来防止在移动设备上出现此错误吗？或者，使用JavaScript“媒体查询”类型的东西阻止脚本运行在1000px以下是更好的解决方案吗？如果是这样，什么是最好的实现方式？

提前谢谢！

代码笔： 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>

Answer 1

如果您确定问题的原因正在移动屏幕上运行该脚本，则只能使用以下代码在台式机上调用滑动脚本：

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

您可以通过更改739来更改要在其上编写脚本的设备的屏幕宽度。之后，您的脚本将仅在大于739px或您选择的屏幕上运行。

更新

如果要在调整大小后一切正常，则应该做一些技巧。

我个人使用此方法，因为它是确保您确定错误和问题的唯一方法。技巧是在调整大小后重新加载页面。在许多情况下，这并不昂贵，因为大多数东西都变现了，不需要重新下载。有很多方法可以做到这一点，但是我使用下面的方法，因为它可以很好地工作并且简单而简短：

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

您只需要在脚本文件的末尾添加此行。调整大小后，一切都会恢复正常。

它如何工作？

调整窗口大小时，将发出一个javascript事件。我们在最后的代码中所做的是重写该事件的事件侦听器。因此，当用户调整窗口大小时，将执行location = location;代码。

这行是什么意思？ location对象是window对象的属性，保留有关当前窗口URL的信息。当您更改location的{{1}}时，浏览器页面将重新加载，以获取新window（more info about location）中的新window。

我们在这里所做的是将当前location分配给location。因此浏览器认为我们有一个重定向请求并重新加载了页面。但是由于新的location与上一个对象相同，因此页面将重新加载，而不是重定向到其他位置。

Answer 2

如果您的问题是在重定向到其页面之前双击它，请尝试

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

}）;

该功能是当您单击导航时，脚本将再次单击它，

Javascript导致移动导航需要双击才能正常工作

2 个答案: