1

CSSとjQueryを使用してカスタム選択ボックスを作成しましたが、今夜までは完了したと思っていました。

コードはここで表示および再生できますhttp://jsfiddle.net/nvv35/5/

問題は、Firefox、IE、またはSafariを使用している場合、選択ボックスの幅が正しくないことです。Chromeを使用してデモを見ると、何も問題はありません。jQueryコードは「ラベル」に必要な幅を設定し、ボックスはほぼ完璧に見えますが、前述のブラウザーではそうではありません。

選択ラベルが短すぎます。ドロップダウンで最も長い子と同じ幅を取得する代わりに、テキストの直後で切り取られます。問題がどこにあるのかがわかりません。

だから、私はあなたの助けが必要です。

アップデート

最終コード： http： //jsfiddle.net/nvv35/9/

4

2 に答える 2

2

parseInt($(this).next(".selectBox").css("border-width"), 10)結果としてNaNになります。

JsFiddle： http: //jsfiddle.net/nvv35/8/

コードを次のように変更します。

**更新：**境界線の幅を正しく取得するには、境界線の特定の側を指定する必要があります。（チェック：jQuery / javascriptで境界線の幅を取得する方法）

$(document).ready(function() {
  $("select").css("display", "none");
  $(".selectContainer").css("display", "inline-block");
  $(".selectHead").each(function() {
    var newWidth = $(this).next(".selectBox").outerWidth();
      var borderWidth = parseInt($(this).next(".selectBox").css("border-left-width").replace(/[^0-9]/g,""), 10) ;
      if(isNaN(borderWidth)) borderWidth  = 0;
    newWidth = newWidth - (borderWidth * 2);
    $(this).css("width", newWidth + "px");
  });
  $(".selectHead").on("click", function() {
    $(this).next(".selectBox").show();
    $(this).closest(".selectContainer").on("mouseleave", function() {
      $(this).find(".selectBox").hide();
    });
  });
  $("li", ".optionsBox").on("click", function() {
    var newValue = $(this).attr("id").replace(/(.*)-/,"");
    $(this).closest(".selectContainer").next("select").val(newValue);
    $(this).closest(".selectBox").prev(".selectHead").html($(this).html());
    $(this).closest(".selectBox").find(".optionSelected").removeClass("optionSelected");
    $(this).addClass("optionSelected");
    $(this).closest(".selectBox").hide();
  });
});
于 2012-07-16T21:56:20.210 に答える
0 
function customSelect(){
 $('.custom-select a.open').on('click', function () {
    if ( $(this).next().hasClass('active') ) {
        $(this).next().removeClass('active').slideUp(250);
    }
    else{
        $(this).next().addClass('active').slideDown(250);
    }
});

$('.custom-select ul.options li').on('click', function () {
    var value = $(this).data('value');        
    $(this).parent().removeClass('active').slideUp(250);
    $(this).parent().parent().prev().attr('value', value);
    $(this).parent().prev().text(value);
});
}
customSelect();

- 詳細はこちら: http://www.pointmycode.com/customize-select-box-with-css-and-jquery/

于 2013-10-28T13:28:30.577 に答える