菜单和子菜单的iPad问题

Question

我的桌面网站有菜单和子菜单。子菜单出现在菜单悬停上。菜单上有空白标签的菜单仅作为具有各自链接页面的子菜单。它在桌面上工作正常。

当在iPad中访问相同时，单击菜单显示子菜单，但是同一页面从第一个子菜单重定向到href链接。我们只想打开子菜单而不是页面重定向。

我们无法从菜单中删除空白标签，因为它停止在iPad中显示子菜单。

有什么建议吗？

Answer 1

假设你的菜单如下所示：

<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 */ 
}