This snippet may be longer than normally written, but it contains the essentials for bootstrap style dropdowns.
Here’s a link
and here’s a button
and here’s a span
Scrolling
Now let’s see a really long dropdown that will scroll: Example
Form Controls
You can add form controls to your dropdowns: Example
With Icons
You can use CSS to add icons to your dropdowns: Example
Panels
Dropdowns can have regular HTML, too. Example
anything inside of a dropdown, so have fun with it!
if (jQuery) (function ($) {
$.extend($.fn, { dropdown: function (method, data) {
switch (method) { case 'show': show(null, $(this)); return $(this); case 'hide': hide(); return $(this); case 'attach': return $(this).attr('data-dropdown', data); case 'detach': hide(); return $(this).removeAttr('data-dropdown'); case 'disable': return $(this).addClass('dropdown-disabled'); case 'enable': hide(); return $(this).removeClass('dropdown-disabled'); }
} });
function show(event, object) {
var trigger = event ? $(this) : object, dropdown = $(trigger.attr('data-dropdown')), isOpen = trigger.hasClass('dropdown-open');
// In some cases we don't want to show it if (event) { if ($(event.target).hasClass('dropdown-ignore')) return;
event.preventDefault(); event.stopPropagation(); } else { if (trigger !== object.target && $(object.target).hasClass('dropdown-ignore')) return; } hide();
if (isOpen || trigger.hasClass('dropdown-disabled')) return;
// Show it trigger.addClass('dropdown-open'); dropdown .data('dropdown-trigger', trigger) .show();
// Position it position();
// Trigger the show callback dropdown .trigger('show', { dropdown: dropdown, trigger: trigger });
}
function hide(event) {
// In some cases we don't hide them var targetGroup = event ? $(event.target).parents().addBack() : null;
// Are we clicking anywhere in a dropdown? if (targetGroup && targetGroup.is('.dropdown')) { // Is it a dropdown menu? if (targetGroup.is('.dropdown-menu')) { // Did we click on an option? If so close it. if (!targetGroup.is('A')) return; } else { // Nope, it's a panel. Leave it open. return; } }
// Hide any dropdown that may be showing $(document).find('.dropdown:visible').each(function () { var dropdown = $(this); dropdown .hide() .removeData('dropdown-trigger') .trigger('hide', { dropdown: dropdown }); });
// Remove all dropdown-open classes $(document).find('.dropdown-open').removeClass('dropdown-open');
}
function position() {
var dropdown = $('.dropdown:visible').eq(0), trigger = dropdown.data('dropdown-trigger'), hOffset = trigger ? parseInt(trigger.attr('data-horizontal-offset') || 0, 10) : null, vOffset = trigger ? parseInt(trigger.attr('data-vertical-offset') || 0, 10) : null;
if (dropdown.length === 0 || !trigger) return;
// Position the dropdown relative-to-parent... if (dropdown.hasClass('dropdown-relative')) { dropdown.css({ left: dropdown.hasClass('dropdown-anchor-right') ? trigger.position().left - (dropdown.outerWidth(true) - trigger.outerWidth(true)) - parseInt(trigger.css('margin-right'), 10) + hOffset : trigger.position().left + parseInt(trigger.css('margin-left'), 10) + hOffset, top: trigger.position().top + trigger.outerHeight(true) - parseInt(trigger.css('margin-top'), 10) + vOffset }); } else { // ...or relative to document dropdown.css({ left: dropdown.hasClass('dropdown-anchor-right') ? trigger.offset().left - (dropdown.outerWidth() - trigger.outerWidth()) + hOffset : trigger.offset().left + hOffset, top: trigger.offset().top + trigger.outerHeight() + vOffset }); } }
$(document).on('click.dropdown', '[data-dropdown]', show); $(document).on('click.dropdown', hide); $(window).on('resize', position);
})(jQuery);











