Javascript 为桌面和iPad实现悬停行为

我正在尝试实现一个主选项卡，悬停时会显示子选项卡

<a href="#" onclick="javascript:displaySubTabs('subTabs', 'tabClasses');" onmouseover="javascript:displaySubTabs('subTabs', 'tabClasses');"><img src="images\img_Classes.png" /></a>

function displaySubTabs(parentTabId, childTabId) {
        $('#' + parentTabId).children().removeClass('show');
        $('#' + childTabId).addClass('show');
    }

函数displaySubTabs（父选项卡ID、子选项卡ID）{
$（'#'+parentTabId）.children（）.removeClass（'show'）；
$（'#'+childTabId）.addClass（'show'）；
}

我也需要在iPad上实现同样的功能。 现在，由于iPad不支持onmouseover，我还需要添加onclick（现在也可以将其更改为ontouchstart）…但问题是，我觉得添加2个处理程序是不必要的

是否有任何方法可以使用紧凑的方式实现此行为

我对所有想法都持开放态度，包括将实现从JS移动到CSS。任何更紧凑、更好的方法

---

请建议。

我建议您完全排除移动平台版本的悬停功能。原因是你解释了，它就是不起作用。只需保持子菜单打开，并根据与之交互的主选项卡进行更改。

我不能保持子菜单打开，因为我有多个主选项卡/子选项卡。。