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 回答