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

Question

I have a response menu called Flexy Menu which is excellent. But the issue I have is that when the menu loads on mobile (and no mouse present) I have a conflict where a href exists on the parent link but also this has an onClick event to open up the child menu. See below as an example, the link "experience-sweden" also opens a dropdown for "touring-sweden" but just as the menu opens the href redirects it to another page

<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> 

I guess the solution is to somehow ignore the first click, so essentially have the href as # and then update once clicked to the actual href. However to make it difficult the menu is entirely dynamic and pulled from a database so the javascript would have to have to have some PHP breakins I am guessing. Any advice appreciated.

Answer 1

i would suggest that you dont apply the onClick event on the anchor tag but apply it on a span tag.

so

1. place a span tag inside the "parent" anchor
2. apply onClick event on the span tag
3. style the span tag as an arrow using css