我的桌面网站有菜单和子菜单。子菜单出现在菜单悬停时。带有空白标签的菜单仅作为具有相应链接页面的子菜单。它在桌面上运行良好。
在 iPad 中访问相同内容时,单击菜单会显示子菜单,但同一页面会从第一个子菜单重定向到 href 链接。我们只想打开子菜单而不是页面重定向。
我们无法从菜单中删除空白标签,因为它停止在 iPad 中显示子菜单。
有什么建议吗?
假设您的菜单如下所示:
<ul>
<li>
<a href="/">Menu Level 1</a>
<ul>
<li>
<a href="/">Menu Level 2</a>
</li>
</ul>
</li>
</ul>
在您的 jQuery“文档就绪”代码中尝试以下内容:
if ('ontouchstart' in window || 'ontouch' in window) {
$('ul > li > a').on('touchstart',function(e){
if (!$(this).parent().hasClass('touchOpen')) {
$('li.touchOpen').removeClass('touchOpen');
$(this).parent().addClass('touchOpen');
return false;
}
});
}
当顶部菜单中的链接被触摸时,它将绑定一个事件,检查链接的父 LI 是否具有指定的类。如果它确实有类,那么什么也不会发生(即用户将继续到新页面)。如果它没有该类,则添加该类,并且链接不被跟踪。
然后你只需要添加“touchOpen”类和你的 :hover css;
li:focus ul,
li:hover ul,
li:active ul,
.touchOpen ul{
/* css code to display the sub menu */
}