关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。
这个问题似乎与 help center 中定义的范围内的编程无关。 .
8年前关闭。
Improve this question
我设计的一个网站使用导航菜单,在 :hover 上显示子菜单。最初的网站没有使用任何响应式设计:它只针对桌面环境。我现在使用响应式设计技术来定位移动设备和平板电脑,其中许多是基于触摸而不是基于鼠标的。
我面临的大问题(许多其他人似乎也面临过)是基于悬停的导航菜单:它在鼠标环境中运行良好,但在触摸设备上,没有可靠的方法来触发悬停,使得该页面难以使用。
目标是这样的:
我的团队不愿意牺牲基于鼠标的机器上的悬停效果。他们喜欢它,不想让菜单基于所有设备点击。我同意这一点。
环顾网络后,我找不到任何单一的解决方案来解决我的问题。我将其中一些放在一起,开发了一些在 Android 上经过良好测试的东西,得到了我想要的功能。有什么可以改进的和/或您认为这种方法有什么问题吗?
jQuery(document).ready(function() {
var touched=false;
jQuery(".nav").on('touchstart', 'li .has_children', function (e) { touched=true; });
jQuery("html").on('mousemove', function (e) { touched=false; });
jQuery("html").on('click', updatePreviousTouched );
jQuery(".nav").on('click', 'li .has_children', function (e) {
updatePreviousTouched(e);
if( touched ) {
if (jQuery(this).data('clicked_once')) {
jQuery(this).data('clicked_once', false);
return true;
} else {
e.preventDefault();
jQuery(this).trigger("mouseenter");
jQuery(this).data('clicked_once', true);
}
}
touched=false;
});
var previous_touched;
function updatePreviousTouched(e) {
if( typeof previous_touched != 'undefined' && previous_touched != null && !previous_touched.is( jQuery(e.target) ) ) {
previous_touched.data('clicked_once', false);
}
previous_touched=jQuery(e.target);
}
}
这是一个 jfiddle:http://jsfiddle.net/5FfCF/1/
如果可以改进此解决方案,请提供任何建议。如果您发现它对您不起作用,也请告诉我。我在这里发布它是为了尝试获得任何改进建议并发布这个想法,以便其他人可以从中受益。
以下是我到目前为止的测试结果:
其他注意事项:
最佳答案
Piddle Diddle Fiddle :)
Fiddle Embedded Demo (use with phone for easiest access)
在阅读这堵文字墙之前,请先检查一下 fiddle 并确保它是您正在寻找的。也在手机上测试(我在我的 Android 上测试过,没有问题)。
如果您有一套完全独立的手机代码,那么您真的没有什么可担心的。适应触摸与悬停事件在 iOS 设备上特别棘手。但是我能够通过捕获一系列转换为触摸事件的鼠标事件来克服这个问题。
对于您的特殊情况,由于您希望这三者之间如此不同,我建议您运行早期脚本来获取屏幕尺寸,如果它小于 ### px x ### px
, 添加一个名为 handheld
的类或 mobile
或任何到body
.现在您所要做的就是分配 touch
捕获代码到$('.mobile .nav')
并有一段单独的代码分配 hover
事件到 PC。
对于平板电脑,您必须决定什么对您更重要 - 能够使用每个菜单的根菜单项单击和导航,或者只允许单击子菜单项(这将消除添加.mobile
归类到 body
)。
这是一些您应该能够在移动设备和桌面设备上使用的代码。
jQuery:
jQuery(document).ready(function () {
$('.nav').on('click mousedown mouseup touchstart touchmove', 'a.has_children', function () {
if ( $(this).next('ul').hasClass('open') && !$(this).parents('ul').hasClass('open')) {
$('.open').removeClass('open');
return false;
}
$('.open').not($(this).parents('ul')).removeClass('open');
$(this).next('ul').addClass('open');
return false;
});
$(document).on('click', ':not(.has_children, .has_children *)', function() {
if( $('.open').length > 0 ) {
$('.open').removeClass('open');
return false;
}
});
});
通常我不会像我将要做的那样复制所有的 HTML,但在这个特定的例子中,你需要完全按照我在这里的方式来避免
inline-block
。空白故障。将我的 fiddle 与您的原作进行比较,看看悬停/单击每个链接有多容易。HTML:
<div class="header-nav-menu">
<ul class="nav">
<li><a href="http://www.google.com">One</a></li><li>
<a class="has_children" href="http://www.google.com">Two</a>
<ul>
<li><a href="http://www.google.com">2A</a></li><li>
<a href="http://www.google.com">2B</a>
</li>
<li><a href="http://www.google.com">2C</a>
</li>
</ul>
</li><li>
<a class="has_children" href="http://www.google.com">Three</a>
<ul>
<li><a href="http://www.google.com">3A</a>
</li>
<li> <a class="has_children" href="http://www.google.com">3B</a>
<ul>
<li><a href="http://www.google.com">3BI</a>
</li>
<li><a href="http://www.google.com">3BII</a>
</li>
<li><a href="http://www.google.com">3BIII</a>
</li>
</ul>
</li>
<li><a href="http://www.google.com">3C</a>
</li>
</ul>
</li><li>
<a href="http://www.google.com">Four</a></li><li>
<a href="http://www.google.com">Five</a></li>
</ul>
</div>
很确定我什至没有触摸 CSS,所以我现在将它留在 Fiddle 中。希望这对您有所帮助。
关于javascript - 处理触摸屏上的悬停事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20818863/