如何在第一次触摸时打开下拉菜单，点击第二个链接 - Jquery？
Posted
技术标签:
【中文标题】如何在第一次触摸时打开下拉菜单，点击第二个链接 - Jquery？【英文标题】：How can I make a dropdown open on the first touch, follow the link on the second - Jquery? 【发布时间】：2012-10-16 14:32:13 【问题描述】：我正在尝试让下拉菜单在基于触摸的设备上正常工作。菜单在单击时打开良好，但由于父元素也是一个链接，因此它会在选择下拉项之前将用户带到该链接。
有没有办法让（仅在触摸设备上）父元素的第一次点击打开下拉菜单，第二次点击将您带到链接？
我对 html 和 CSS 有很好的了解，但对 javascript 却一无所知，所以如果解决方案是基于脚本的，请尽可能描述性。
谢谢
【问题讨论】：
我有点困惑 - 您希望在单击下拉菜单时打开它还是将鼠标悬停在它上面？ 我希望它在悬停在计算机上以及在触摸屏上触摸时打开。但我希望它在第一次触摸时忽略链接 hmmm...你介意我给你一个答案只是用鼠标悬停在上面吗？我会尝试为您研究有关触摸屏的信息，但您可能需要为计算机编写所有代码，然后放入 PhoneGap 以便它适用于触摸屏。 我让它在鼠标悬停时完美运行，它在点击触摸屏时运行。问题在于 li 也有链接。因此菜单打开，但用户也被带到链接。 好吧，我输入了一个答案，而这个没有谈论链接 - 尝试将链接放入我给你的代码中，它可能会起作用。对不起，我误解了x 【参考方案1】：看看 DoubleTapToGo：
“当您第一次点击父项时，DoubleTapToGo 会阻止浏览器打开新 URL，但如果连续再次点击则允许。”
http://osvaldas.info/drop-down-navigation-responsive-and-touch-friendly
【讨论】：
【参考方案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
【讨论】：
谢谢。该网站已经上线了，所以我不能用 javascript 重建整个菜单系统。它是用 CSS 创建的，但我正在寻找一个脚本来告诉父元素如何执行 好的 - 你为什么不尝试制作一个 .js 文件？这样，您只需将所有代码添加到该新文件中，然后在<head> 标记中添加指向它的链接，例如 <script type = 'text/javascript' src = 'linktofile.js'></script>【参考方案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
);
【讨论】：
我需要父菜单项链接到页面，所以我不能将它们全部更改为 '#' 虽然 Javascript 可能工作，但我该如何实现呢？菜单位于类 .menu 的 div 中 显示一些代码，我将向您展示如何做到这一点。 这里是菜单 HTML 的一部分 - pastebin.com/rBftYn37 以及与之关联的 CSS - pastebin.com/jGrLVz0e 什么代替 //do your stuff here 你需要在这里学习javascript：devinrolsen.com/learning-basics-of-javascript【参考方案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
);
【讨论】：
【参考方案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>
【讨论】：
以上是关于如何在第一次触摸时打开下拉菜单，点击第二个链接 - Jquery？的主要内容，如果未能解决你的问题，请参考以下文章
打开第二个时关闭下拉菜单/ document.click 被单击 Angular 5 阻止