How do I add a class to a link with one tap and go to the link with the second tap for iPhones and iPads?

Question

I'm having a particular issue with only tapping Apple tablets and phones. Desktop is fine.

When a navigation item is clicked, I would like to apply the class "show" to it. Then, when that link is clicked again, the visitor is taken to the URL of that link.

The current coding I have works for only non-Apple tablets and phones. I found a potential solution here, but no go. You can see part of this solution in my jQuery code below: iPad/iPhone hover problem causes the user to double click a link

By the way, I realize that my past couple of unresolved questions are extensions of this one, so please bear with me as I develop coding on my end along the way with help from the previous questions to figure this one out. Appreciate any help!

Here's my current code setup:

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');
});

Use preventDefault on the first tap, then remove preventDefault for the second tap. — Korgrue, May 30 '18 at 16:26
@Korgrue How do you write single and double tap codes? I've tried .dblClick() and even Hammer.js at one point to no avail. — Weebs, May 30 '18 at 16:38

score 1 · Accepted Answer · answered May 30 '18 at 16:29

1

Add a check for the href attribute, redirect if it exists if not create it.

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

answered May 30 '18 at 16:29

Chris

170
1
12

In my current jQuery code, where would you stick your recommendation? – Weebs May 30 '18 at 16:32

score 0 · Answer 2 · answered May 30 '18 at 18:10

Thank you, @Chris for your contribution. With it, I was able to solve the issue and get it working.

I integrated @Chris' code recommendation into my jQuery code as shown below:

$('#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");
  }
});

How do I add a class to a link with one tap and go to the link with the second tap for iPhones and iPads?

2 Answers2