1

次のオプションを持つ「選択」タグがあります。

<select>
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

jquery を使用して「slideUp」および「slideDown」効果を追加したいのですが、必要に応じた簡単な例が見つかりません。効果は次のコンボボックスの例のようになります: Telerik Combobox

4

2 に答える 2

3

考えられる解決策の 1 つを次に示します。スタイリングをいじる必要があります。

$(function(){
    $.fn.extend({
        slidingSelect: function(options)
        {
            var select= $(this);
            var selector=select.selector;

            var selectedValue=select.val();

            if(selectedValue=="undefined")
                selectedValue=select.find("option:first").val();                

            var divToggle=$("<div>"+selectedValue+"</div>").attr({id:select.attr("id")+"Toggle"}).css({width:select.width()}).click(function(){
                $(selector).slideToggle();
            }).insertBefore(select);

            select.attr("size",6);  
            select.change(function(){
                divToggle.html(select.val());
                $(selector).slideToggle();
            });

        }       
    });
    $("#colors").hide().slidingSelect();

});
div#colorsToggle
{
    display:block;
    padding:5px;
    border:1px solid black;

}

.select_style{
  position: absolute; 
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="colors" class="select_style">
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

このメソッドは、選択の名前に基づいて div をslidingSelect作成する関数でjquery を拡張し、そのトグル div が選択でクリックされると、Telerik コントロールで行うようになります。見栄えの良い UI を作成するために、CSS でのスタイルを設定します。toggleslidesDown#{ID of Select}Toggle

于 2013-01-22T22:13:57.693 に答える
1

選択（オプション）が隠されていると思います。ボタンを押すと、ボタンの下に選択が表示されます。オプションを選択すると、ボタンは選択された値を取り、選択が消えます。

あなたのコードが共有されることを願っています。:)

于 2013-01-22T21:57:08.550 に答える