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

Question

我正在尝试让下拉菜单在基于触摸的设备上正常工作。菜单在单击时打开良好，但由于父元素也是一个链接，因此它会在选择下拉项之前将用户带到该链接。

有没有办法让（仅在触摸设备上）父元素的第一次点击打开下拉菜单，第二次点击将您带到链接？

我对 HTML 和 CSS 有很好的了解，但对 javascript 却一无所知，所以如果解决方案是基于脚本的，请尽可能描述性。

谢谢

Answer 1

看看 DoubleTapToGo：

“当您第一次点击父项时，DoubleTapToGo 会阻止浏览器打开新 URL，但如果连续再次点击则允许。”

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

Answer 2

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>

这是用于创建一个下拉菜单的 JavaScript，当鼠标悬停在它上面时会下降 - 它来自 Arman Danesh 的一本书，名为 JavaScript in 10 Simple Steps or Less。他是一位伟大的作家，并且可能会比我更好地解释这一点 - 但就是这样；

您正在做的是创建一个带有 () 中声明的预定义变量的函数。 numEntries... 行将变量 numEntries 的值设置为预定义变量 menuEntries 的长度。换句话说，（在此示例中，编程的条目数为 3，使 numEntries = 3）无论您编码的条目数是 numEntries 的值。

document.write 的内容可能看起来令人困惑，但它只是保存 HTML 代码的 javascript 代码，因为将 div 放在它自己的位置会破坏程序，因为您将它放在脚本标签中。如果你在任何时候不明白我的意思，只要问我，我会告诉你教科书上的内容。

这是第一个处理的函数，第二个是鼠标悬停时下拉菜单的原因。如果不引用这本书，我不知道如何向您解释清楚，但是如果您需要我解释，我会尝试。如果你也需要 HTML 代码来显示菜单，我可以给你整个例子，我的电脑上有。

希望这会有所帮助，请问您是否需要我复习一下。我会继续研究如何为您更改触摸屏 x

Answer 3

这可能会有所帮助。如果你有链接

<a href="#">your drop down menu</a> 我的意思是把# 添加到href

或者在 JavaScript 中执行此操作

var link = $('.menu').find('a');

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

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

我的解决方案是在 javascript 中切换 href 内容：

// 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');
    }
  });
};

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>