单击触摸设备 (iPad/iPhone) 上的任意位置以隐藏由 .hover() 切换的下拉菜单
Posted
技术标签:
【中文标题】单击触摸设备 (iPad/iPhone) 上的任意位置以隐藏由 .hover() 切换的下拉菜单【英文标题】：Click anywhere on touch device (iPad/iPhone) to hide dropdown that is toggled by .hover() 【发布时间】：2016-09-08 17:27:03 【问题描述】：我有一个下拉菜单，当用户将鼠标悬停在导航链接上时会显示该菜单。这是在 jQuery 中使用 .hover() 触发的。当用户单击导航链接（iPad/iPhone）时，此下拉菜单的打开和关闭在触摸设备上工作正常，但当用户单击页面上的其他任何位置时，我试图隐藏下拉菜单。
Here is a link to my JSFiddle with a basic setup.
我找到了使用 .click() 的方法，但不是 .hover()。
这是我的基本 jQuery 代码：
$('.hoverItem').hover(function(e)
$('.dropdown').toggleClass('visible');
e.stopPropagation()
);
【问题讨论】：
【参考方案1】：为什么不让body可点击，这样点击时隐藏下拉菜单？
html：
<body id="clickArea">
<div class="hoverItem">Hover here to show dropdown</div>
<div class="dropdown">Dropdown Area</div>
</body>
JS：
$('.hoverItem').hover(function(e)
$('.dropdown').toggleClass('visible');
);
$('#clickArea').click(function(e)
$('.dropdown').toggleClass('visible');
);
jsfiddle
【讨论】：
【参考方案2】：首先，恕我直言，使用起来要好得多：
.on(click, function(e))
对
.hover(function(e))
接下来是 if / else 语句。
var navcheck = $(this).attr(class);
if(navcheck!=dropdown) $(.dropdown).hide(); else $(dropdown).show();
【讨论】：
.on(click, function(e)) 是否仍然像悬停一样，还是会成为点击。我真的需要下拉菜单只在我悬停时显示 您可以应用任何操作首选项：.on(hover, mouseover, touchstart, click, etc)以上是关于单击触摸设备 (iPad/iPhone) 上的任意位置以隐藏由 .hover() 切换的下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章
jQuery superfish 菜单/悬停在 iPad、iPhone 等
iPad/iPhone 方向上的 window.scrollTo