Javascript导致移动导航需要双击才能正常工作
[英]Javascript causing mobile navigation to require a 'double tap for links to work
问题描述
我在网站的移动版本（iOS）上注意到，主导航需要两次点击链接才能重定向页面。 删除各种样式/位的代码后，我找到了问题的原因，这是我的Javascript产生“滑行”悬停效果的原因。
我的基本理解是，由于脚本仍在移动设备上运行，因此在不需要时，它意味着导航正在运行/期望悬停效果，一旦运行，您就可以按需要单击链接了吗？
该脚本可以在桌面上完美运行，因此我不想更改任何功能，但是可以添加一些内容来防止在移动设备上出现此错误吗？ 或者，使用JavaScript“媒体查询”类型的东西阻止脚本运行在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 个解决方案
解决方案1
0 2018-09-01 07:57:16
如果您确定问题的原因正在移动屏幕上运行该脚本，则只能使用以下代码在台式机上调用滑动脚本：
if ( $(window).width() > 739) {
//Desktop scripts
}
else {
//mobile scripts
}
您可以通过更改739来更改要在其上编写脚本的设备的屏幕宽度。 之后，您的脚本将仅在大于739px或您选择的屏幕上运行。
更新
如果要在调整大小后一切正常，则应采取一些技巧。
我个人使用此方法，因为它是确保您确定错误和问题的唯一方法。 技巧是在调整大小后重新加载页面。 在许多情况下，这并不昂贵，因为大多数东西都变现了，不需要重新下载。 有很多方法可以做到这一点，但是我使用下面的一种方法，因为它可以很好地工作并且简单而简短：
window.onresize = function () {
location = location;
}
您只需要在脚本文件的末尾添加这些行。 调整大小后，一切都会恢复正常。
这个怎么运作？
调整窗口大小时，将发出一个javascript事件。 我们在最后的代码中所做的是重写该事件的事件侦听器。 因此，当用户调整窗口大小时， location = location; 代码将执行。
这条线是什么意思？ location对象是window对象的属性，并保留有关当前窗口url的信息。 当您更改window的location时，浏览器页面将重新加载以获取新location的新window （ 有关location的更多信息 ）。
我们在这里所做的就是将当前location分配给该location 。 因此浏览器认为我们有一个重定向请求并重新加载了页面。 但是由于新location与上一个location是同一对象，因此该页面将重新加载，而不是重定向到其他位置。
解决方案2
0 2018-09-01 07:58:19
如果您的问题是在重定向到其页面之前双击它，请尝试
$('.site-nav__list a').click(function(){
$(this).click();
}）;
该功能是当您单击导航时，脚本将再次单击它，
从javascript onclick编辑代码到jquery tap在移动设备上工作
[英]Editing code from javascript onclick to jquery tap to work on mobile
JavaScript导致所有子菜单成为一个链接，而不是移动设备上的单个链接（错误）
[英]JavaScript causing all sub-menus to be one link instead of individual links on mobile (bug)
jQuery Mobile - 内部#page导航仅在首次加载页面时双击
[英]jQuery Mobile - Inner #page navigation only work with double-click when page first loaded
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.