悬停菜单在触摸设备上不起作用，因为链接被触发

本文介绍了悬停菜单在触摸设备上不起作用，因为链接被触发的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在响应式网站上的菜单遇到以下问题:

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 解决这个问题没有任何问题.通常我为智能手机或其他移动设备使用带有额外菜单的响应式设计.因此我使用 @media screen.遗憾的是，这不适用于所有触摸设备，例如更大的平板电脑，如某些 iPad 或微软表面.

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 &平板电脑.我还没有可能在触摸笔记本电脑或微软表面上测试它.如果有人有:请随时发表评论

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

这是一个 JsFiddle 示例

或者您也可以在这里尝试:

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>

这篇关于悬停菜单在触摸设备上不起作用，因为链接被触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！