how to handle hover on mobile?

Question

I need to slightly rebuild this project. I would like to below 991px width, the menu would grow when clicked. The funny thing is that the desktop menu behaves the way I want it for mobile.

When elements have a class .nomobiledropdownhover, they behave as expected

The most important is this fragment, for mobile:

$("#navbarSupportedContent li").hover(
      function(){
          if (!$(this).hasClass('nomobiledropdownhover')) {
              return;
          }else{
              $(this).children('ul').hide();
              $(this).children('ul').slideDown('fast');
              $(this).addClass('open ');
          }

          if(opmenu == 0){
              menu_height($(this),'in');

              opmenu = 1;
          }
      },
      function () {

          if (!$(this).hasClass('nomobiledropdownhover')) {
              return;
          }else{
              $('ul', this).slideUp('fast');
              $(this).removeClass('open ');
          }

          menu_height($(this),'out');
          opmenu = 0;
      });


}

and this for desktop:

$('.dropdown-toggle').on('click', function(e) {

        if ($(this).closest('.dropdown').hasClass('nomobiledropdownhover')) {

          $(this).closest('.dropdown').removeClass('open ');
          return 0;

        }else{
          $('.dropdown').find('.dropdown-menu').attr('style', '');

          var menuopen = $(this).closest('.dropdown');
          // menuopen.find('.dropdown-menu').attr('style', '');
          menuopen.find('.dropdown-menu').css('display', 'block');
          menuopen.find('.dropdown-menu').css('top', '0');

          setTimeout(function(){

            $("html, body").stop().animate({scrollTop:menuopen.offset().top}, 300, 'swing', function() {
            });

          },120);
        }

  });

I glue it all because it is quite confusing https://github.com/Mikelinsky/hover-on-mibile/blob/master/assets/js/script.js

Below the width of 991px the menu opens after clicking and closes after clicking somewhere else

score 0 · Accepted Answer · answered Apr 03 '19 at 10:32

0

I think the main problem is that you are relying on the hover() method, that catch the mouse-enter and mouse-leave event, which are never fired on a touch screen like there is on most mobile devices.

You should likely rely on touch events rather than on click or hover, as suggested in this answer: https://stackoverflow.com/a/11398089/6949810

answered Apr 03 '19 at 10:32

Jean Alexandre

180
11

Thank you for answer. I disabled in this code hover() functions. I left on('click',) and it works. – Mike Apr 03 '19 at 11:17
Are you targeting phones and other devices with touch screens, or just computers with a mouse? If you are targeting touch screens I am afraid that the .on('click') will not work with those. – Jean Alexandre Apr 03 '19 at 13:20
It looks like on("click") it is enough to run the function also on the touch screens. It works for me. The problem is to connect hover() and on("click") so that below 991px will work on("click"), for the desktop it will work hover(); I have a problem with this at the moment. – Mike Apr 05 '19 at 07:06

how to handle hover on mobile?

1 Answers1