如何创建像gmail“移动到”按钮这样的下拉按钮?

我使用jQuery Multiselect 做类似的事情。

有点晚了,但有一个我的按钮,带有使用JQuery UI的下拉选项列表解决方案:

工作解决方案 jsfiddle

html:

<button id="menuButton">Menu Button</button>
<ul style="z-index: 9999999;position: absolute;" id="menuElement">
    <li><a href="#">Select Green</a>

    </li>
    <li><a href="#">Select Red</a>

    </li>
    <li><a href="#">Select Gray</a>

    </li>
</ul>

代码:

var $menuButton = $("#menuButton");
var $menuElement = $("#menuElement");

$menuButton
    .button({
             icons: { 
                       secondary: "ui-icon-triangle-1-s"                 
                    }
            })
    .click(function (event) 
              {
                 $(document).one("click", function () 
                    {
                       $menuElement.css("visibility", "hidden");
                    });

                $menuElement.css("visibility", "visible");
                event.stopPropagation();
             });

$menuElement
    .menu({
             select: function (event, ui) 
                        {
                           $menuElement.css("visibility", "hidden");
                        }
         })
    .css("visibility", "hidden")
    .position({
                 my: "left top",
                 at: "left bottom",
                 of: $buttonElement
              });