Javascript 使JQuery按钮充当下拉菜单

将此JQuery UI按钮示例作为参考：

现在，当你点击这个小按钮时，你将如何实现这个下拉列表？ 我的警告主要是转换。button（）对实际的按钮所做的操作会扰乱偏移量的协调

总之，我需要对如何正确实现与当前主题集成的JQuery按钮的点击下拉列表发表意见

谢谢！

---

Alex

我想，Drowdown应该总是出现在其他内容的上方，而不是向下推，所以绝对定位非常适合。基本上，在按钮和下拉菜单周围添加一个带有

位置：相对

的包装器div（其将具有

位置：绝对；显示：无

），并在单击时切换下拉可见性。下拉列表的绝对位置不应受到包装器div的其他子项（如按钮）的影响，因此它将显示在CSS中您告诉它的位置。

HTML:

<div id="container"> 
    <span class="arrow">&or;</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>

.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
}

$('.arrow').click(function() {
    $('.selectBox').slideToggle(200).css('borderTop', 'none');
    $('.selectBox li').click(function() {
        $('.mehidden').val($(this).text());
        $('.default').text($(this).text());
        $('.selectBox').slideUp(200);
    });
});

JQUERY:

<div id="container"> 
    <span class="arrow">&or;</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>

.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
}

$('.arrow').click(function() {
    $('.selectBox').slideToggle(200).css('borderTop', 'none');
    $('.selectBox li').click(function() {
        $('.mehidden').val($(this).text());
        $('.default').text($(this).text());
        $('.selectBox').slideUp(200);
    });
});

我终于成功了，看起来像上面的图片。
我在博客上写了这件事，我也在发布下面所有的代码。
请参阅博客文章以获得更深入的解释

CSS

.ItemActionButtons{}
.ItemActionButtons.SaveExtraOptions
{
显示：无；列表样式类型：无；填充：5px；边距：0；边框：1px实心#dcdc；背景色：#fff；z索引：999；位置：绝对；
}
.ItemActionButtons.SaveExtraOptions li
{
填充：5px 3px 5px 3px；边距：0；宽度：150px；边框：1px实心#fff；
}
.ItemActionButtons.SaveExtraOptions li:悬停
{
光标：指针；
背景色：#DCDC；
}
.ItemActionButtons.SaveExtraOptions li a
{
文本转换：无；
}

HTML

Save and New
保存和复制

JavaScript

$（document）.delegate（'#btnSaveExtra'，mouseleave'，function（）{setTimeout（function（）{if（！itemactionbutions.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；
$（文档）.ready（函数（）{
$（“.button”）.button（）；
$（“.buttonset”）.buttonset（）；
$（'btnSaveExtra'）。按钮（{icons:{primary:{ui icon plusthick}}）；
$（'btnSaveExtraOptions li'）.addClass（'ui-corner-all-ui小部件'）；
$（'btnSaveExtraOptions li'）。悬停(
函数（）{$（this）.addClass（'ui-state-default'）；}，
函数（）{$（this）.removeClass（'ui-state-default'）；}
);
$（'btnSaveExtraOptions li'）.mousedown（函数（）{$（this.addClass（'ui-state-active'）；}）；
$（'btnSaveExtraOptions li'）.mouseup（函数（）{$（this.removeClass（'ui-state-active'）；}）；
});
var ItemActionButtons={
isHoverMenu:false，
AllowDelete:function（value）{value？$（“#btnDelete”）.show（）：$（“#btnDelete”）.hide（），
AllowCancel:函数（值）{value？$（“#btnCancel”）.show（）：$（“#btnCancel”）.hide（）；}，
AllowSave:function（value）{value？$（“#btnSave”）.show（）：$（“#btnSave”）.hide（），
AllowSaveExtra:函数（值）{value？$（“#btnSaveExtra”）.show（）：$（“#btnSaveExtra”）.hide（），
onDeleteClick:函数（）{}，
onCancelClick:函数（）{}，
onSaveClick:function（）{}，
onSaveExtraClick:函数（）{
$（'#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（）{}
}

也可以使用插件来执行此操作

---

只需添加代码即可在单击菜单中显示下拉divevent@AlexCode也许我的解决方案不是你想要的。但是我发布这篇文章是为了帮助你自己制作下拉列表。谢谢你，伙计。我更关心的是与jQuery的布局集成，确保它能够正确地融合主题，而不是如何实现基本的下拉功能。看看我的解决方案帖子。谢谢克里斯。我知道定位和如何实现我所要求的基本功能，我的问题是.button（）对实际控件所做的转换会干扰偏移坐标，如果我更改主题，我不能保证返回的坐标会正确工作。啊，好的，那么，是否可以在

.button（）

转换之前设置按钮的宽度和高度，以匹配转换之后的尺寸？除非你说的“坐标”不是我想的。