0

私はカスタムドロップダウンを実装しています.だから私は良い解決策を見つけました.しかし、小さなボタンを取りたい場合はボタンが全体を取るという問題があります(CSSで幅を取っていません)。次に、ドロップダウンを取りたいのですが、固定の高さをスクロールする必要がありますか? 最初に2つのドロップダウンを作成し、要素が多すぎます.2番目に要素がほとんどないため、2番目と同じ高さで最初のドロップダウンをスクロールしたい.

ここに私のフィドルがあります 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

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 に答える