How can I open a drop-down list on the first touch, follow the link on the second - jQuery?

Question

I am trying to make the dropdown menu work correctly on touch devices. The menu opens normally when clicked, but since the parent element is also a link, it then leads the user to the link before the drop-down list item is selected.

Is there a way to do this so that (on touch devices only) the first click of the parent element opens a drop-down list, and the second click leads you to a link?

I have good knowledge of HTML and CSS, but none of them is javascript, so please be as visual as possible if the solution is script based.

thanks

Answer 1

Take a look at DoubleTapToGo:

"When you first click on a parent element, DoubleTapToGo prevents the browser from opening a new URL, but allows it to be clicked repeatedly in succession."

http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly

Answer 2

This can help. if you have a link

<a href="#">your drop down menu</a> I mean add # to href

Alternatively do it in JavaScript

 var link = $('.menu').find('a'); $(document).on('touchstart', link, function (e) { e.preventDefault(); //do your stuff }); 

Answer 3

 function createMenu(menuName,menuTitle,menuEntries,left,width) { numEntries = menuEntries.length; document.write('<div class="menuTitle" style="left:0px; width:100px;"'); document.write('onMouseover="menuToggle(\'' + menuName + '\');"'); document.write('onMouseout="menuToggle(\'' + menuName + '\');">'); document.write(menuTitle); document.write('</div>'); document.write('<div id="myMenu" class="menu" style="left:0px; width:100px;"'); document.write('onMouseout="menuToggle(\'' + menuName + '\')">'); for (i = 0; i < numEntries; i++) { document.write('<a href="' + menuEntries[i].url + '" class="menuEntry">' + menuEntries[i].entry + '</a><br>'); } document.write('</div>'); } function menuToggle(target) { targetMenu = (document.getElementById) ? document.getElementById(target).style : eval("document." + target); targetMenu.top = (parseInt(targetMenu.top) == 22) ? -2000 : 22; } // --> </script> 

this is javascript to create a drop-down menu that crashes when the mouse hovers over it - this is from a book called javascript in 10 simple steps or less from Arman Danesh. He is a great author and will probably explain it much better than me, but here goes:

what you do is create a function with predefined variables, as indicated in (). the numEntries ... line sets the value of the numEntries variable to the length of the predefined menuEntries variable. In other words, (in this example, the number of programmed entries is three, making numEntries = 3), however many of the entries you encode are numEntries.

document.write stuff may look confusing, but it's just javascript code that contains HTML code, because just put a div on it to break the program, since you put it in script tags. if you don’t understand me at some point, just ask and I will tell you what's in the textbook when I have it on me later.

As for the first function, the second is what makes the menu drop down menu a mouse cursor. I don’t know how to explain this clearly to you without quoting the book, but I will try, if you need me to explain it. I can give you the whole example, if you need HTML code to display the menu too, I have it on my computer.

Hope this helps, and please just ask if I need to sort out something. I will continue to explore how to change it for the touch screen for you x

Answer 4

 $('.has-sub').on("touchstart", function (e) { var submenu = $(this).find('ul').first(); var link = $(this); //preselect the link if (link.hasClass('hover')) { link.removeClass('hover'); $(submenu).slideUp(0); e.stopPropagation() return true; } else { $(submenu).slideDown(0); link.addClass('hover'); e.stopPropagation(); return false; //extra, and to make sure the function has consistent return points } 

});