Сделайте это выпадающее меню для работы на "сенсорной" поверхности про IE 11

Я нашел эти коды, которые создают выпадающее меню, которое близко к тому, что нам нужно. Тем не менее, он не работает с сенсорным устройством. По крайней мере, это не работает на моем 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();
      });
});
Источник

2 ответа

Используйте "ontouchstart"

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

Это переключит имя класса во время сенсорного события, и вы можете показать / скрыть свой выпадающий

Источник

Можете добавить touchstart событие и touchend событие в вашем списке событий для поддержки сенсорных устройств.

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

Jsfiddle

Источник
Другие вопросы по тегам