Bootstrap: Dropdown on Hover Plugin Demo

DIY Slidedown

Files for this are in the diy-slidedown folder, on Github. Added “do-it-yourself” CSS-transitions to the dropdown lists, making the value for padding-bottom on the dropdown-list transition from zero, (or mabybe some low value like 5px) to its full length. This works because the height value for the list has been reset to zero. This creates this custom slidedown effect, you can read more about this here.

Making the toggle-links clickable

Essential is to have data-toggle="dropdown" data-target="#" on the toggle links in the HTML-markup, in order for this to work.

 <a href="http://www.google.com" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-target="#">

From the docs for dropdowns on getbootstrap.com

the dropdown events which are fired at the .dropdown-menu's parent element.

One can hook into these to do something on those events:

  // effectively create two different functioning dropdowns: this is for touch
  $('.dropdown').on({

  'hide.bs.dropdown': function(e) {

  $(this).on('click', function(e) {
    var self = $(this);
    $(this).toggleClass('is-clicked').siblings('.dropdown').removeClass('is-clicked');

    if (self.hasClass('open', 'is-clicked')) {
      e.stopPropagation();
    }
    else {
      return this;
    }
  });

  }

  });

  // effectively make two different functioning dropdowns: this is for desktop, or to be precise: non-touch
  $('.dropdown').on({

  'show.bs.dropdown': function(e) {

    $(this).on('click', function(e) {

  if('ontouchstart' in document) {
        return this;
      }
      else {
        e.stopPropagation();
      }
    });
  }

  });

The javascript for this works, but probably could be improved upon, (should one use relatedTarget as suggested in the docs? Don't know, couldn’t make that work). So please let me know if there is a better way of doing this.