使JQuery按钮充当下拉列表
以此JQuery UI Button示例作为参考： http ： //jqueryui.com/demos/button/#splitbutton
现在，如果单击小按钮，您将如何实现该下拉列表？ 我的注意事项主要是转换.button（）对实际的按钮进行操作，这个按钮会使偏移量变得混乱。
总而言之，我需要就如何正确实现与当前主题集成的JQuery按钮单击下拉列表的意见。
谢谢！ 亚历克斯
我终于做到了，看起来像上面的图片。
我在这里写了博客，我也发布了所有代码。
有关更深入的解释，请参阅博客文章。
CSS
HTML
- Save and New
- Save and Copy
JavaScript的
也可以使用插件来执行此操作。
jQuery DropDown按钮
恕我直言，drowdowns应该总是出现在’over’其他内容，而不是将其推倒，所以绝对定位是完美的。 基本上添加一个包含div的包装div position: relative按钮周围的position: relative和下拉菜单（ position:absolute; display:none ），并在点击时切换下拉可见性。 下拉列表的绝对定位不应受包装div的其他子项（例如按钮）的影响，因此它将准确显示在CSS中告诉它的位置。
HTML：
∨ Choose your option... - One
- Two
- Three
CSS：
.arrow { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #CCCCCC; font-size: 0.8em; font-weight: bold; height: 26px; left: 208px; line-height: 26px; position: absolute; text-align: center; vertical-align: middle; width: 26px; z-index: 100; } .selectBox { border: 1px solid #1F1F1F; list-style-type: none; margin: 0; padding: 3px; position: absolute; width: 200px; display:none; top: 25px; } #container { position:relative } .toggler { overflow:visible; } .default { border: 1px solid #1f1f1f; width:200px; height:20px; padding:3px; position:absolute } .selectBox li:hover { background:#ddd }
JQUERY：
$('.arrow').click(function() { $('.selectBox').slideToggle(200).css('borderTop', 'none'); $('.selectBox li').click(function() { $('.mehidden').val($(this).text()); $('.default').text($(this).text()); $('.selectBox').slideUp(200); }); });