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

【问题标题】：Dynamic width using jQuery - Custom Select Box使用 jQuery 的动态宽度 - 自定义选择框
【发布时间】：2012-07-15 19:35:42
【问题描述】：

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

代码可以在这里查看和玩http://jsfiddle.net/nvv35/5/

问题是当使用 Firefox、IE 或 Safari 时，选择框的宽度不正确。如果您使用 Chrome 查看演示，您不会发现任何问题。 jQuery 代码为“标签”设置了所需的宽度，并且该框看起来非常完美，但在前面提到的浏览器中却不是......

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

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

更新

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

【问题讨论】：

标签： jquery css dynamic width drop-down-menu

【解决方案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();
  });
});

【讨论】：

啊，是的，你是对的。问题似乎是边框减法。但是，现在，框变得太大了，因为它在所有这些浏览器中导致 NaN 并自动获取代码中写入的 0 值。我可以手动将 2 添加到代码中并修复它，但是我怎样才能让它获取边框宽度并仍然在那些浏览器中工作？
感谢您的更新。一分钟前我碰巧找到了完全相同的页面，所以设法解决了它：）再次感谢您的回答！ +1 并接受

【解决方案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();

【讨论】：