代码之家 › 专栏 › 技术社区 › Weebs

如何通过一次点击将类添加到链接中,并通过第二次点击转到iPhone和iPad的链接?

css html jquery

Weebs · 技术社区 · 7 年前

我有一个特别的问题,就是只开发苹果的平板电脑和手机。桌面没问题。

单击导航项时,我想将类“show”应用于它。然后,再次单击该链接时,访问者将被带到该链接的url。

我目前的编码只适用于非苹果平板电脑和手机。我在这里找到了一个潜在的解决方案,但没有成功。您可以在下面的jquery代码中看到此解决方案的一部分: iPad/iPhone hover problem causes the user to double click a link

顺便说一句,我意识到我过去的两个未解决的问题是这个问题的扩展,所以请耐心等待我在前面问题的帮助下开发我的代码来解决这个问题。感谢您的帮助!

这是我当前的代码设置:

HTML

<div id="nav">
  <li class="wsite-menu-item-wrap"><a href="#">Home</a></li>
  <li class="wsite-menu-item-wrap"><a href="#">About</a></li>
  <li class="wsite-menu-item-wrap"><a href="#">Contact</a></li>
</div>

CSS

.show {
  background:orange;
  color:white;
}

JQuery

if($('#nav .wsite-menu-item-wrap a').hasClass('show') {
  $('#nav .wsite-menu-item-wrap a').on('click touchend', function(e) {
    var el = $(this);
    var link = el.attr('href');
    window.location = link;
  });
}

$('#nav .wsite-nav-1 a, #wsite-menus .wsite-menu-wrap:nth-of- type(1)').hover(function() {
  $('#nav .wsite-nav-1 a').addClass('show');
}, function() {
  $('#nav .wsite-nav-1 a').removeClass('show');
});

2 回复 | 直到 7 年前

Chris 7 年前

添加对Href属性的检查,如果该属性不存在则重定向。

if (el.hasClass("show")) {
    window.location = link;
} else {
    el.addClass("show");
}

Weebs 7 年前

谢谢你,克里斯,谢谢你的贡献。有了它,我就能够解决这个问题并使之发挥作用。

我将@chris'代码建议集成到jquery代码中,如下所示:

$('#nav .wsite-menu-item-wrap a').on('click touchend', function(e) {
  var el = $(this);
  var link = el.attr('href');
  if (el.hasClass("show")) {
    window.location = link;
  } else {
    el.addClass("show");
  }
});