Here is a simple plugin I have written for a jQuery dropdown effect. Simple show / hide (although open classes may be better).
When you click the HTML the event searches the whole DOM for a specific class and then hides it (or removes the open class), even if the dropdown is already close.
Is there a way to only apply the events to open dropdowns somehow?
$.fn.dropdown = function () {
return this.each(function () {
// Initial varaibles
var $this = $(this),
$toggle = $this.find('.dropdown-toggle'),
$dropdown = $this.find('.dropdown-menu');
// When clicking a dropdown toggle
$toggle.click( function(e){
// Stop the default behaviour
e.preventDefault();
// Clear any open dropdowns
clearDrops();
// Stop the event from bubbling up the DOM tree
e.stopPropagation();
// Toggle the dropdown
$dropdown.toggle();
});
// Clear the dropdowns
var clearDrops = function () {
// Search the entire DOM for dropdowns & hide them
// THERE MUST BE A BETTER WAY
$('.dropdown-menu').hide();
};
// Trigger the closing of dropdowns when clicking on the HTML
$('html').bind('click', clearDrops);
});
};
$('.dropdown').dropdown();
e.stopPropagation()
? Do you really want this not to prograte up the dom tree? \$\endgroup\$