Implement touch for tablets and mobile on menu hover

touchmenu.js

  // true if we are in touch screen
  var isTouch = ('ontouchstart' in window) ||
                window.DocumentTouch && document instanceof DocumentTouch;
                
  /*========
  
   = Primary Menu
  
  ========*/
  Drupal.angers.primarymenu = function(selector){
    $(selector).once('primarymenu', function(){
      var thisli = $(this);

      var ulElement = $(this).find('> ul'),
          liElement = ulElement.find('> li');
          
      nbreElement = liElement.length;
      if(nbreElement > 4){
        for(var i = 0; i < nbreElement; i+=4) {
          liElement
            .slice(i, i+4)
            .wrapAll('<div class="groupLi"/>');
        }
      }
      if($('html').hasClass('js')){
        ulElement.hide();
      }

      // Gestion des touchscreen, au premier clic, il ne faut pas aller sur le lien
      if(isTouch) {
        $(this).find('> a').click(
          function() {
            if($(this).hasClass('touch-click') && thisli.find('> ul').is(':visible')) {
              $(this).removeClass('touch-click');
            }
            else {
              thisli.parent().find('.touch-click').removeClass('touch-click');
              $(this).addClass('touch-click');
              return false;
            }
          }
        )
      }

      $(this).hover(
        function() {
          ulElement.stop(1,1).delay(250, function() {
            $(this).stop(1,1).fadeIn(300)
          })
        },
        function() {
          ulElement.stop(1,1).delay(100, function() {
            $(this).stop(1,1).fadeOut(100)
          })         
        }
      );
    });
  }