javascript - 响应式菜单问题 - 如何在移动环境中处理 HREF 和 onclick 事件

Question

我有一个名为 Flexy Menu 的响应菜单，非常棒。但我遇到的问题是，当菜单在移动设备上加载时(没有鼠标)我有一个冲突，其中父链接上存在 href，但它也有一个 onClick 事件来打开子菜单。参见下面的示例，链接“experience-sweden”也打开了“touring-sweden”的下拉菜单，但就在菜单打开时，href 将其重定向到另一个页面

<ul class="flexy-menu">
  <li><a  href="index" >Home</a><li>
  <li><a  href="experience-sweden" >Experience Sweden</a>
     <ul>
         <li><a href="touring-sweden">Touring Holidays</a>
     </ul>
  </li> 

我想解决方案是以某种方式忽略第一次点击，所以基本上将 href 设置为 #，然后在点击后更新为实际的 href。然而，使菜单变得困难的是，菜单是完全动态的，并且是从数据库中提取的，因此我猜 javascript 必须有一些 PHP 中断。任何建议表示赞赏。

Answer 1

我建议您不要将 onClick 事件应用于 anchor 标记，而是将其应用于跨度标记。

所以

1. 在“父” anchor 内放置一个 span 标签
2. 在 span 标签上应用 onClick 事件
3. 使用 css 将 span 标签样式化为箭头