如何在iPhone/iPad上实现首次点击添加class、二次点击跳转链接

嘿，我明白你在苹果移动设备上遇到的这个导航交互问题有多头疼——桌面端好好的，一到iPad/iPhone上就失灵，确实让人抓狂。让我帮你梳理下问题所在，然后给出可行的修复方案。

问题背景 #

我仅在苹果平板和手机上遇到了特定交互问题，桌面端运行正常。核心需求是：

• 首次点击导航项时，为其添加show类
• 再次点击该链接时，跳转至对应URL

当前代码仅在非苹果移动设备上生效，尝试过相关方案但未成功。

当前代码配置 #

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括号未闭合，且逻辑判断时机不对
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; 
  }); 
} 

// hover事件在iOS上会导致双击问题，因为触摸设备会把第一次触摸识别为hover
$('#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'); 
});

问题分析 #

1. iOS触摸设备的hover行为：在iPad/iPhone上，浏览器会把第一次触摸操作识别为hover事件，第二次触摸才会触发click，这直接导致你的需求逻辑失效——第一次触摸只触发了hover加类，第二次触摸才会触发跳转，完全不符合预期。
2. 语法错误：原代码的if语句缺少闭合括号，导致代码无法正常执行。
3. 事件绑定逻辑错误：原代码的事件绑定是基于初始状态判断的，而不是每次点击时动态判断，逻辑不成立。

修复方案 #

我们需要完全抛弃hover事件，改用click/touchend事件来控制类的切换和跳转逻辑，同时处理iOS上可能出现的事件重复触发问题：

修复后的jQuery代码 #

$(document).ready(function() {
  // 给每个导航链接绑定点击/触摸事件
  $('#nav .wsite-menu-item-wrap a').on('click touchend', function(e) {
    var $el = $(this);
    var link = $el.attr('href');

    // 先阻止默认跳转行为，处理类的逻辑
    e.preventDefault();

    // 如果当前链接已经有show类，直接跳转
    if ($el.hasClass('show')) {
      window.location.href = link;
      return;
    }

    // 移除其他链接的show类，给当前链接添加show类（保证唯一激活项）
    $('#nav .wsite-menu-item-wrap a').removeClass('show');
    $el.addClass('show');

    // 防止touchend和click事件重复触发
    e.stopPropagation();
    setTimeout(function() {
      $el.off('click');
    }, 100);
  });
});

代码说明 #

1. 抛弃hover事件：直接用点击/触摸事件处理所有交互，彻底避免iOS上的hover干扰。
2. 动态判断状态：每次点击时检查当前链接的状态——有show类则跳转，无则添加类并清空其他链接的类。
3. 处理事件重复：iOS上touchend和click可能会同时触发，通过短暂延迟解绑click事件来避免重复执行逻辑。
4. 可控的默认行为：首次点击时先阻止跳转，等处理完类的切换后，二次点击再执行跳转，完美匹配需求。

这样修改后，不管是iOS移动设备还是桌面端，都能精准实现你想要的交互效果。

内容的提问来源于stack exchange，提问作者Weebs