使這個下拉菜單工作在「觸摸」表面專業版IE 11

Question

我發現這些代碼產生的下拉菜單接近我們所需要的。但是，它不適用於觸摸設備。至少它不適用於我的表面專業版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){}); 

Jsfiddle

Answer 2

使用 「ontouchstart」

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

這將觸摸事件中切換類名，您可以顯示/隱藏下拉