Deactivate hover when in "mobile mode"

[haurg]

Deactivate hover when in "mobile mode"

I am using a workaround for this by executing the plugin via jQuery on screens larger than 480px only:

   $(function() {
       var pageWidth = $(window).width();
       if( $(window).width()> 480){
           $('.dropdown-toggle').dropdownHover();
       }
   });

So on everything smaller than this I am using Bootstrap's data-toggle="dropdown" without the plugin. Just make sure data-toggle="dropdown" isn't available for screens larger than 480px. There the plugin comes into play and not Bootstrap's data-toggle.

Maybe this workaround helps a little.

P. S.: That also means that one should put the parent menu item into the dropdown menu's children list as well to have a clickable link which otherwise wouldn't be available on those small screens. (Mobile only.) Hope to have everything explained somehow understandable :-)

[holtkamp]

@haurg does this work for you? Seems this issue can be closed...

[mattez]

Hi. ...and how you disable Bootstrap Hover Drop-down after its initialisation? When screen width is again less then 480px? For example when user rotates device?

[MrMartiniMo]

Here is my solution for this.

jQuery(function($) {
  var MOBILE_BREAKPOINT = 768

  var $window = $(window)
  var $dropdowns = $('[data-hover="dropdown"]')

  var resizeId;
  var initilized = true

  // Debounce resize function.
  $window
    .on('resize.handleDropdowns', function() {
      clearTimeout(resizeId);
      resizeId = setTimeout(resizedEnded, 500);
    })
    .trigger('resize.handleDropdowns')

  function resizedEnded() {
    if ($window.width() <= MOBILE_BREAKPOINT) {
      // Remove dropdown on hover if initialized.
      if (initilized) {
        $dropdowns
          .each(function() {
            var $link = $(this)
            $link.off('mouseenter').off('mouseleave')
            $link.parent().off('mouseenter').off('mouseleave')
          })
          .on('click.handleDropdowns', function(e) {
            e.preventDefault()

            var $link = $(this)
            var $menuItem = $link.closest('.menu-item')
            var $subMenu = $menuItem.find('.dropdown-menu')

            if ($menuItem.hasClass('open')) {
              $menuItem.removeClass('open')
              $link.attr('aria-expanded', false)
            } else {
              $menuItem.addClass('open')
              $link.attr('aria-expanded', true)
            }
          })
        initilized = false
      }
    } else {
      // Add dropdown on hover and remove dropdown on click.
      if (!initilized) {
        $dropdowns
          .off('click.handleDropdowns')
          .dropdownHover()
        initilized = true
      }
    }
  }
})