MedAssets - jQuery UI .button()

by ryanbrill

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div>
    <a href="#" class="menu">Select an action</a>
    <ul>
        <li><a href="#">Open...</a></li>
        <li><a href="#">Save</a></li>
        <li><a href="#">Delete</a></li>
    </ul>
    
    <a href="#" class="menu">Select an action</a>
    <ul>
        <li><a href="#">Open...</a></li>
        <li><a href="#">Save</a></li>
        <li><a href="#">Delete</a></li>
    </ul>
</div>

CSS

.ui-menu { position: absolute; width: 100px; }
a.active {
    background: #fff;
}

JavaScript

$(function() {
    $(".menu").button().click(function() {
        var $menu = $(this).next(),
            isVisible = $menu.is(":visible");
        
        $(".menu").removeClass("active").next().hide(); // Hide any open menus 
        
        if (!isVisible) {
            $(this).addClass("active");
            $menu.show().position({
                my: "left top",
                at: "left bottom",
                of: this
            });
        }
        $(document).one("click", function() {
            $menu.hide();
            $(".menu").removeClass("active");
        });
        return false;
    })  
    .next().hide().menu();
});