css - 菜单和子菜单的 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 */
}