如何在第一次触摸时打开下拉菜单，点击第二次 - Jquery 上的链接？

Question

I'm trying to get a dropdown menu to work correctly on touch based devices. The menu opens fine on click, but because the parent element is also a link it then takes the user to the link before a dropdown item has been selected.

Is there are way to make it so that (only on touch devices) the first tap of the parent element opens the dropdown and the second click brings you to the link?

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

Thanks

Answer 1

Take a look at DoubleTapToGo:

"When you tap the parent item for the first time, DoubleTapToGo prevents the browser from opening a new URL but allows that if tapped once again in succession."

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

Answer 2

This may help. if you have a link

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

Alternatively do this 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 for creating a drop-down menu that drops when the mouse is hovered over it - it's from a book called JavaScript in 10 Simple Steps or Less by Arman Danesh. He's a great author and will probably explain this a lot better than me - but here goes;

what you're doing is creating a function with predefined variables as declared in the (). the line numEntries... sets the value of the variable numEntries as the length of predefined variable menuEntries. In other words, (in this example the number of entries programmed is three, making numEntries = 3) however many entries you code is the value of numEntries.

the document.write stuff may look confusing, but it's just javascript code which holds the HTML code, because just putting the div on it's own would break the program since you're putting this in script tags. if you don't understand me at any point just ask and i'll tell you what's in the textbook when i have it on me later.

That's the first function dealt with, the second is what makes the menu dropdown on the mouse hover. i don't know how to explain this clearly to you without quoting the book, but i'll try if you need me to explain it. I can give you the whole example if you need the HTML code for displaying the menu too, I have it on my computer.

Hope this helps and please just ask if you need me to go over anything. I'll keep researching how to alter it for a 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
 }

});

Answer 5

My solution is toggling the href content in javascript:

 // JS let dropdown = document.getElementsByClassName("dropdown") let droplink = document.getElementsByClassName("drop-link") //console.log(droplink[0].getAttribute('href')) to check code for (let i = 0;i<dropdown.length;i++){ // if you have more than one dropdown dropdown[i].addEventListener('click', function(){ // if dropdown is already displaying if(dropdown[i].classList.contains('YourdisplayDropdownClass')){ droplink[i].href = 'myhtmlpage.html' } else { droplink[i].href = '#' dropdown[i].classList.add('YourdisplayDropdownClass'); } }); };

Structure in HTML

 <nav> <ul> <li class="dropdown"><a class="drop-link" ref="myhtmlpage.html">MyHTMLpage</a> <ul class="drop-menu"> <li><a href="mysubpage1.html" class="drop-item">MySubpage1</a></li> <li><a href="mysubpage2.html" class="drop-item">MySubpage2</a></li> </ul> </li> </ul> </nav>