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＆＃34;文档准备好＆＃34;中尝试以下内容：代码：

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是否具有指定的类。如果它确实有类，则没有任何反应（即用户将进入新页面）。如果它没有该课程，则会添加该课程，并且该链接不会被跟踪。

然后你只需要添加＆＃34; touchOpen＆＃34;和你一起上课：hover css;

li:focus ul,
li:hover ul,
li:active ul,
.touchOpen ul{
 /* css code to display the sub menu */
}

iPad与菜单和子菜单有关

1 个答案: