0

我正在实现自定义下拉菜单。所以我找到了一个很好的解决方案。但是如果我想使用小按钮（它在 css 中不占用宽度），则存在一个问题，即 Button Take whole。其次我想下拉应该滚动一个固定的高度吗？我首先创建了两个下拉菜单，我使用了太多元素。第二，我只使用了几个元素，我想在第二个相同的高度上滚动第一个下拉菜单。

这是我的小提琴 http://jsfiddle.net/ravi1989/gMLDb/2/

function showOptions(target){
    selectedButton = $(target);
   console.log("target"+target);
   console.log("selectedButton"+selectedButton)

    $("#optionsDisplayDiv").html("");
    var array = this[$(target).attr("data-array")];
    for(var i=0; i< array.length; i++){
        $("#optionsDisplayDiv").append("<div class='optionItem'>" + array[i] + "</div>");
    }
    $("#optionsDisplayDiv").css("width", $(target).width());
    $("#optionsDisplayDiv").css("top", ($(target).position().top + $(target).height()));
    $("#optionsDisplayDiv").show();
}
4

2 回答 2

1

尝试这个：

<a id="vehicleType" class="myOptionButton" data-role="button" data-icon="arrow-d" data-iconpos="right" data-corners="false" data-array="vehicleTypeOptions" onclick="showOptions(this)" style="width:200px">Type</a>
<a id="colorType" class="myOptionButton" data-role="button" data-icon="arrow-d" data-iconpos="right" data-corners="false" data-array="vehicleColorOptions" onclick="showOptions(this)" style="width:200px">Color</a>

<div id="optionsDisplayDiv" style="max-height: 100px; height: 100px; overflow: auto;" >
</div>

http://jsfiddle.net/emdhie/gMLDb/9/

于 2013-10-11T05:44:24.753 回答
0

在 css 中给出按钮的宽度是可行的。检查页面中的其他 css 是否覆盖了按钮 css。

要为下拉菜单设置固定高度，您可以max-height在 css 中提供属性。

在这里检查小提琴

脚本插件

您的 js 脚本需要大量时间遍历相同的元素，这会对性能产生影响。您可以使用链接和缓存概念来使您的代码更好。再加上遵循拇指规则“永远不要在循环内进行 dom 操作”。

function showOptions(target){
    selectedButton = $(target)     //caching

    var array = this[selectedButton.attr("data-array")],
        option="";
    for(var i=0; i< array.length; i++){
        option += "<div class='optionItem'>" + array[i] + "</div>";
    }
    $("#optionsDisplayDiv").html(option ).css({
                  "width": selectedButton .width(),
                  "top": selectedButton.position().top + selectedButton.height()
     }).show();    //chaining of methods
}
于 2013-10-11T05:32:20.923 回答