jQuery nestable click-to-open dropdown menu
Simple, jQuery nestable click-to-open dropdown menu. Supports touch.
HTML
<div id="divSelect" class="dropdown">
<a href="#options" class="dropdown-toggle">Options</a>
<ul class="dropdown-menu">
<li class="option"><a href="#">Option 1</a></li>
<li class="option"><a href="#">Option 2</a></li>
<li class="option"><a href="#">Option 3</a></li>
<li class="option"><a href="#">Option 4</a></li>
</ul>
</div>
CSS
.dropdown {
float:left;
position:relative;
width:200px;
padding:5px;
margin-right:10px;
background:#ccc;
}
.dropdown a {
display:block;
text-decoration:none;
color:#333;
}
ul.dropdown-menu li:hover {
font-weight:bold;
}
/* toggle */
.dropdown .dropdown-toggle {
padding:0;
}
/* dropdown */
.dropdown-menu {
position:absolute;
top:100%;
right:0;
left:0;
display:none;
margin:0;
padding:0;
list-style-type:none;
background:#ccc;
}
/* options */
.dropdown-menu .option a {
padding:5px;
}
.dropdown-menu .option a:hover {
background-color:#aaa;
}
/* open */
.dropdown-open {
z-index:400;
}
.dropdown-open > .dropdown-menu {
display:block;
}
JavaScript
(function($, undefined)
{
var open = [];
var opts = {
selector: '.dropdown',
toggle: 'dropdown-toggle',
open: 'dropdown-open',
nest: true
};
$(document).on('click.dropdown touchstart.dropdown', function(e)
{
// Close the last open dropdown if click is from outside the target dropdown
if ( open.length && ( ! opts.nest || ! open[ open.length - 1 ].find( e.target ).length ) )
{
open.pop().removeClass( opts.open );
}
var $this = $(e.target);
// If target is a dropdown then toggle it...
if ( $this.hasClass( opts.toggle ) )
{
e.preventDefault();
$this = $this.closest( opts.selector );
if ( ! $this.hasClass( opts.open ) )
{
open.push( $this.addClass( opts.open ) );
}
else
{
open.pop().removeClass( opts.open );
}
}
});
})(jQuery);