【发布时间】：2018-09-01 16:53:02
【问题描述】：
我注意到在我的网站的移动版本 (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>【问题讨论】：
标签： javascript jquery html css touch