How to prevent menu from click function and active double click only
<p>I am testing a website and would like and noticed a problem in the menu:
I have an item called About, that has it children...problem is that about is a link too. So, on mobile, If a click under About,the children will be displayed,but before I try to click on any list item,the sites goes to the About page.
Well I assume that it is all because I am using hover and focus.</p>

<p>How can I click on a menu item that has children to display its item and prevent it from going to it's page when I click for the first time?
Here my fiddle: <a href="https://jsfiddle.net/Wosley_Alarico/mvn7ayun/1/" rel="nofollow">https://jsfiddle.net/Wosley_Alarico/mvn7ayun/1/</a></p>

<p>I am thinking that first of all I must prevent the click function perhaps:</p>

<pre><code>$(document).ready(function (){            
   $( "li.menu-item-has-children" ).click(function( e ) {
      e.preventDefault();

   });
});
</code></pre>

<p>Hope I made some sense since English is not my first language  </p>