Javascript 使 JQuery 按钮充当下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6546010/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Making a JQuery button act as a dropdown
提问by AlexCode
Take this JQuery UI Button sample as a reference: http://jqueryui.com/demos/button/#splitbutton
以这个 JQuery UI Button 示例作为参考：http: //jqueryui.com/demos/button/#splitbutton
Now, how would you implement that dropdown when click the small button? My caution is mainly with the transformation .button() does to the actual button that messes the offset coordenates.
现在，当单击小按钮时，您将如何实现该下拉菜单？我的警告主要是 .button() 对实际按钮所做的转换，这会弄乱偏移坐标。
To sum it, I need opinions on how to correctly implement a dropdown on the click of a JQuery button that integrates with the current theme.
总而言之，我需要关于如何在单击与当前主题集成的 JQuery 按钮时正确实现下拉列表的意见。
Thanks! Alex
谢谢！亚历克斯
回答by AlexCode
I finally made it and looks like the picture above.
I blogged about it hereand I'm also posting all the code bellow.
Please refer to the blog post for deeper explanation.
我终于做到了，看起来像上图。
我在这里写了关于它的博客，我也在下面发布了所有的代码。
请参阅博客文章以获得更深入的解释。
CSS
CSS
<style type="text/css">
.ItemActionButtons{}
.ItemActionButtons .SaveExtraOptions
{
display: none; list-style-type: none; padding: 5px; margin: 0; border: 1px solid #DCDCDC; background-color: #fff; z-index: 999; position: absolute;
}
.ItemActionButtons .SaveExtraOptions li
{
padding: 5px 3px 5px 3px; margin: 0; width: 150px; border: 1px solid #fff;
}
.ItemActionButtons .SaveExtraOptions li:hover
{
cursor: pointer;
background-color: #DCDCDC;
}
.ItemActionButtons .SaveExtraOptions li a
{
text-transform: none;
}
</style>
HTML
HTML
<div class="ItemActionButtons">
<div class="buttonset" style="float: right;">
<input id="btnDelete" type="button" value="Delete" class="button" onclick="ItemActionButtons.onDeleteClick.apply(this)" />
<input id="btnCancel" type="button" value="Cancel" class="button"onclick="ItemActionButtons.onCancelClick.apply(this)" />
</div>
<div id="divSaveButton" class="buttonset" style="float: right;">
<input id="btnSave" type="button" value="Save" class="button" onclick="ItemActionButtons.onSaveClick.apply(this)" />
<input id="btnSaveExtra" type="button" class="button" value="+" onclick="ItemActionButtons.onSaveExtraClick.apply(this)" />
<ul class="SaveExtraOptions ui-corner-bottom" id="btnSaveExtraOptions">
<li onclick="$('#btnSaveExtraOptions').toggle(); ItemActionButtons.SaveAndNewClick.apply(this)">Save and New</li>
<li onclick="$('#btnSaveExtraOptions').toggle(); ItemActionButtons.SaveAndCopyClick.apply(this)">Save and Copy</li>
</ul>
</div>
</div>
JavaScript
JavaScript
<script type="text/javascript">
$(document).delegate('#btnSaveExtra', 'mouseleave', function () { setTimeout(function(){ if (!ItemActionButtons.isHoverMenu) { $('#btnSaveExtraOptions').hide(); }}, 100, 1) });
$(document).delegate('#btnSaveExtraOptions', 'mouseenter', function () { ItemActionButtons.isHoverMenu = true; });
$(document).delegate('#btnSaveExtraOptions', 'mouseleave', function () { $('#btnSaveExtraOptions').hide(); ItemActionButtons.isHoverMenu = false; });
var $IsHoverExtraOptionsFlag = 0;
$(document).ready(function () {
$(".button").button();
$(".buttonset").buttonset();
$('#btnSaveExtra').button({ icons: { primary: "ui-icon-plusthick" } });
$('#btnSaveExtraOptions li').addClass('ui-corner-all ui-widget');
$('#btnSaveExtraOptions li').hover(
function () { $(this).addClass('ui-state-default'); },
function () { $(this).removeClass('ui-state-default'); }
);
$('#btnSaveExtraOptions li').mousedown(function () { $(this).addClass('ui-state-active'); });
$('#btnSaveExtraOptions li').mouseup(function () { $(this).removeClass('ui-state-active'); });
});
var ItemActionButtons = {
isHoverMenu: false,
AllowDelete: function (value) { value ? $("#btnDelete").show() : $("#btnDelete").hide() },
AllowCancel: function (value) { value ? $("#btnCancel").show() : $("#btnCancel").hide(); },
AllowSave: function (value) { value ? $("#btnSave").show() : $("#btnSave").hide() },
AllowSaveExtra: function (value) { value ? $("#btnSaveExtra").show() : $("#btnSaveExtra").hide() },
onDeleteClick: function () { },
onCancelClick: function () { },
onSaveClick: function () { },
onSaveExtraClick: function () {
$('#btnSaveExtraOptions').toggle();
var btnLeft = $('#divSaveButton').offset().left;
var btnTop = $('#divSaveButton').offset().top + $('#divSaveButton').outerHeight(); // +$('#divSaveButton').css('padding');
var btnWidth = $('#divSaveButton').outerWidth();
$('#btnSaveExtraOptions').css('left', btnLeft).css('top', btnTop);
},
SaveAndNewClick: function () { },
SaveAndCopyClick: function () { }
}
</script>
回答by Zahid Riaz
回答by chrisf
IMHO, drowdowns should always appear 'over' other content, not push it down, so absolute positioning is perfect for that. Basically add a wrapper div with position: relativearound the button and the dropdown menu (which will have position:absolute; display:none), and toggle the dropdown visibility on click. The absolute positioning of the dropdown shouldn't be affected by other children of the wrapper div, such as the button, so it will appear exactly where you tell it to in the CSS.
恕我直言，drowdowns 应该总是出现在其他内容的“上方”，而不是将其向下推，因此绝对定位是完美的。基本上position: relative在按钮周围添加一个包装 div和下拉菜单（将有position:absolute; display:none），并在单击时切换下拉可见性。下拉菜单的绝对定位不应受到包装器 div 的其他子级（例如按钮）的影响，因此它将准确显示在 CSS 中您告诉它的位置。
回答by thecodeparadox
HTML:
HTML：
<div id="container">
<span class="arrow">∨</span> <span class="default">Choose your option...</span>
<input type="hidden" value="" class="mehidden"/>
<ul class="selectBox">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
</div>
CSS:
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);
});
});
