Question

我使用CSS和jQuery创建了一个自定义选择框，直到今晚我还以为我已经完成了......但是没有......

可以在http://jsfiddle.net/nvv35/5/

查看和播放代码

问题是当使用Firefox，IE或Safari时，选择框无法获得正确的宽度。如果你使用Chrome查看演示，你会发现没有错。 jQuery代码为“标签”设置了所需的宽度，并且该框看起来非常完美，但在之前提到的浏览器中却没有。

选择标签太短了。而不是在下拉列表中获得与最长孩子相同的宽度，而是在文本之后立即切断..我只是无法找到问题出在哪里..

所以，我需要你的帮助伙伴们。

更新

最终代码：http://jsfiddle.net/nvv35/9/

Answer 1

parseInt($(this).next(".selectBox").css("border-width"), 10)导致了NaN。

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

将您的代码更改为：

**更新：**要获得边框宽度正确的边框特定边需要指定。（检查：How to get border width in 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();
  });
});

Answer 2

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/

使用jQuery的动态宽度 - 自定义选择框

2 个答案: