使此下拉菜单适用于"touch"表面专业版IE 11

Question

我找到了这些代码，这些代码生成了接近我们所需的下拉菜单。然而，它不适用于触摸设备。至少它在我的surface pro IE 11上不起作用。当你的手指离开菜单时，下拉菜单会在你选择任何菜单项之前消失。我如何在触摸屏上工作？http://fiddle.jshell.net/r6ty9nw9/3/

<nav>
<div class="wrapper">
  <ul id="menu" class="clearfix">
    <li><a href="#">Home</a></li>
    <li><a href="#">Categories</a>
      <ul>
        <li class="purple"><a href="#">Design</a>
          <ul>
            <li><a href="#">Photoshop</a></li>
            <li><a href="#">Illustrator</a></li>
            <li><a href="#">InDesign</a></li>
          </ul>
        </li>
        <li class="green"><a href="#">Writing</a>
          <ul>
            <li><a href="#">Copywriting</a></li>
            <li><a href="#">Journalism</a></li>
            <li><a href="#">Poetry</a></li>
            <li><a href="#">Storytelling</a></li>
            <li><a href="#">Copywriting</a></li>
            <li><a href="#">Journalism</a></li>
            <li><a href="#">Poetry</a></li>
            <li><a href="#">Storytelling</a></li>
          </ul>
        </li>
        <li class="aqua"><a href="#">Accounting</a>
          <ul>
            <li><a href="#">Taxes</a></li>
            <li><a href="#">Credit</a></li>
            <li><a href="#">Asset Management</a></li>
          </ul>
        </li>
        <li class="red"><a href="#">Marketing</a>
          <ul>
            <li><a href="#">Print</a></li>
            <li><a href="#">Digital</a></li>
            <li><a href="#">Branding</a></li>
            <li><a href="#">Presenting</a></li>
            <li><a href="#">Social Media</a></li>
          </ul>
        </li>
        <li class="blue"><a href="#">Development</a>
          <ul>
            <li><a href="#">HTML5/CSS3</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">Ruby on Rails</a></li>
          </ul>
        </li>
        <li class="gold"><a href="#">Photography</a>
          <ul>
            <li><a href="#">Mechanics</a></li>
            <li><a href="#">Composition</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">The Team</a></li>
        <li><a href="#">Our Mission</a></li>
      </ul>
    </li>
  </ul>
</div>
</nav>
$(function(){
    var defaultMenuHeight = 0;
    $('a[href="#"]').on('click', function(e){
                        e.preventDefault();
                    });
    $('#menu > li').on('mouseover', function(e){
                        var menuItem = $(this);
                        menuItem.find('> a').mouseover(function(e){
                            $(this).next().css({"padding-bottom":0});
              defaultMenuHeight = menuItem.find('ul').actual('outerHeight');
           });
        $(this).find("ul:first").show();
        $(this).find('> a').addClass('active');
        //HERE FIX
        if(defaultMenuHeight == 0){
            defaultMenuHeight = menuItem.find('ul').actual('outerHeight');
        }
    }).on('mouseout', function(e){
          $(this).find("ul:first").hide();
          $(this).find('> a').removeClass('active');
       });
    $('#menu li li').on('mouseover',function(e){
        if($(this).has('ul').length) {
            $(this).parent().addClass('expanded');
            var ttlLiHeight = 0;
            $(this).find('ul li').each(function() {
                var curLiHeight = $(this).actual('innerHeight');
                ttlLiHeight += curLiHeight;
            });
            if(ttlLiHeight >= defaultMenuHeight){
                var difference = ttlLiHeight-defaultMenuHeight;
                $(this).parent('#menu li ul').css({"padding-bottom":difference});
            }else{
                $(this).parent('#menu li ul').css({"padding-bottom":0});
            }
            $('#result').html("Default Height: " + defaultMenuHeight + "<br>padding bottom: " + difference);
        }
        $('ul:first',this).parent().find('> a').addClass('active');
        $('ul:first',this).show();
    }).on('mouseout',function(e){
         $(this).parent().removeClass('expanded');
         $('ul:first',this).parent().find('> a').removeClass('active');
         $('ul:first', this).hide();
      });
});

Answer 1

您可以在事件列表中添加touchstart事件和touchend事件以支持可触摸设备。

$('#menu > li').on('mouseover touchstart touchend', function(e){});

Jsfddle

Answer 2

使用"ontouchstart"

<a href="" ontouchstart="this.classList.toggle('classname')">Menu</a>

这将在触摸事件期间切换类名，您可以显示/隐藏下拉