悬停菜单在触摸设备上不起作用，因为触发了链接 [英] Hover menu is not working on touch-device because link gets triggered
问题描述
响应式网站上的菜单出现以下问题:
I've got the following problem with a menu on a responive website:
我创建了一个HTML菜单，该菜单具有ul/li-结构，其中包含作为类别名称的链接
I created a html menu which has ul/li-structure which contains links as category-names
<ul>
<li>
<a href="linkToCat">maincat1</a>
<ul>
<li>
<a href="linkToCat">subcat1.1</a>
<ul>
//deeper category stucture
</ul>
</li>
</ul>
</li>
<li>
<a href="linkToCat">maincat2</a>
<ul>
<li>
<a href="linkToCat">subcat2.1</a>
</li>
<li>
<a href="linkToCat">subcat2.2</a>
</li>
</ul>
</li>
</ul>
<style>
li > ul {
display:none;
}
li:hover > ul {
display:block;
}
</style>
我只在开始时显示主要猫，而子猫则在悬停时打开，如 JSFiddle .
I am only showing the maincats at the beginning and the the subcats open on hover as shown in this JSFiddle.
一切在桌面上都可以正常工作.问题是，一旦我使用链接作为类别名称(我需要这样做)，它就无法在触摸设备(例如智能手机/平板电脑)上运行.
Everything just works fine on desktop. The problem is that it doesnt work on touch-devices (e.g. smartphones/tablets) as soon as I use links as the names of the categories (Which I need to do).
有什么方法可以使菜单在桌面上与悬停一起使用，并且在将链接用作类别名称时仍可在触摸设备上使用吗?
Is there any way to make a menu that works with hover on desktop and that is still useable on touch-devices when using links as categorynames?
关于使用JavaScript或jQuery解决此问题，我没有任何问题.通常，我在智能手机或其他移动设备上使用带有响应菜单的Extram菜单.因此，我正在使用@media screen.遗憾的是，这不适用于所有触摸设备，例如某些平板电脑(例如某些iPad)或Microsoft Surface.
I got no problem about using JavaScript or jQuery to solve this problem. Normally I am using a responsive design with a extram menu for smartphones or other mobile devices. Therefor I am using @media screen. This sadly doesn't work with all touch devices like for example bigger tablets like some iPads or the microsoft surface.
谢谢您的回答和提示.
修改:
问题是<a href>链接总是被触发，因此当我单击类别时菜单无法打开.
现在，我还在 JSFiddle
The problem is the <a href> The link always get triggert and so the menu doesn't open when i click on a category.
I now also have added links to the categorynames in the JSFiddle
推荐答案
针对触摸设备双击的解决方法
我现在通过添加以下JavaScript找到了解决问题的方法
I now found a solution for my problem by adding the following JavaScript
关于如何判断设备是否为触摸设备的想法基于此答案.
The idea of how to dectect if the device is a touch device is based on this answer.
$(document).ready(function(){
//added for surface
window.USER_IS_TOUCHING = false;
window.addEventListener('touchstart', function onFirstTouch() {
window.USER_IS_TOUCHING = true;
// we only need to know once that a human touched the screen, so we can stop listening now
window.removeEventListener('touchstart', onFirstTouch, false);
}, false);
function isTouchDevice() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
$('ul > li > a').click(function(e){
var target = $(e.target);
var parent = target.parent(); // the li
if(isTouchDevice() || window.USER_IS_TOUCHING){
if(target.hasClass("active")){
//run default action of the link
}
else{
e.preventDefault();
//remove class active from all links
$('ul > li > a.active').removeClass('active');
//set class active to current link
target.addClass("active");
parent.addClass("active");
}
}
});
$('ul > li').click(function(e){
//remove class active from all links if li was clicked
if (e.target == this){
$(".active").removeClass('active');
}
});
});
以及以下CSS
.active > ul >li{
display:block;
}
现在，触摸设备的第一次单击将打开子菜单，而双击将运行链接的默认操作.
Now the first click of a touch device opens the submenu while a doubleclick runs the default action of the link.
我已经在Android智能手机上测试了此解决方案，平板电脑以及iPhone和平板电脑上ipad.我还没有在触摸式笔记本电脑或Microsoft表面上对其进行测试的可能性.如果有人有:随时发表评论
I have tested this solution on an android smartphone & tablet and also on iphone & ipad. I havn't had the possibility to test it on a touchlaptop or microsoft surface yet. If anyone has: feel free to write a comment
或者您也可以在这里尝试:
Or you can also try it out here:
$(document).ready(function(){
window.USER_IS_TOUCHING = false;
window.addEventListener('touchstart', function onFirstTouch() {
window.USER_IS_TOUCHING = true;
// we only need to know once that a human touched the screen, so we can stop listening now
window.removeEventListener('touchstart', onFirstTouch, false);
}, false);
function isTouchDevice() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
$('ul > li > a').click(function(e){
var target = $(e.target);
var parent = target.parent(); // the li
if(isTouchDevice() || window.USER_IS_TOUCHING){
if(target.hasClass("active")){
//run default action of the link
}
else{
e.preventDefault();
//remove class active from all links
$('ul > li > a.active').removeClass('active');
//set class active to current link
target.addClass("active");
parent.addClass("active");
}
}
});
$('ul > li').click(function(e){
//remove class active from all links if li was clicked
if (e.target == this){
$(".active").removeClass('active');
}
});
});
li > ul {
display:none;
}
li:hover > ul {
display:block;
}
.active > ul >li{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<a href="stackoverflow.com">maincat1</a>
<ul>
<li>
<a href="stackoverflow.com">subcat1.1</a>
<ul>
<li>
subcat1.1.1
</li>
<li>
subcat1.1.2
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="stackoverflow.com"> maincat2</a>
<ul>
<li>
subcat2.1
</li>
<li>
subcat2.2
</li>
<li>
subcat2.3
<ul>
<li>
subcat2.3.1
</li>
<li>
subcat2.3.2
</li>
</ul>
</li>
</ul>
</li>
</ul>
这篇关于悬停菜单在触摸设备上不起作用，因为触发了链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
