下拉框的引导令牌字段的宽度不能适合不可见的div

Question

我在我的网站上使用了Bootstrap Token Field。它在我的网页上完美运行。但是，当我将该令牌字段放入任何隐藏的div时，问题就发生了。我的意思是，想象有一个隐藏的div（display: none;）在那个看不见的div里面，我已经把令牌归档了。单击按钮后，可以看到隐藏的div。那时，如果我注意到令牌字段框的下拉框/自动完成建议框，我看到该下拉框的宽度无法获得整个宽度，在默认状态下它是完美的。我正在给你看一张照片，以便你更清楚。

这是令牌字段的正常情况：

这是条件，如果它留在一个看不见的div。看，根据输入字段，下拉框的宽度不是100％：

这是我的小提琴链接：http://jsfiddle.net/qV2E2/

点击“显示”链接，以显示隐形div

我不明白为什么会这样！如何使下拉框的宽度与输入字段的宽度相似？

Answer 1

如果您想让它发挥作用，请尝试this。只需在显示隐藏的div后执行javascript，您将拥有：

<div class="default">
    <input type="text" class="form-control tokenfield1" value="" />
</div>
<a href="#" class="show pull-right">Show</a>
<div class="clearfix"></div>
<div class="another">
    <input type="text" class="form-control tokenfield2" value="" />
</div>

和

$('.show').click(function() {
    $('.another').slideToggle();
    $('.tokenfield2').tokenfield({
  autocomplete: {
    source: ['Red City','Blue City','United Kingdom','Australia','United Sates','Finland','Bulgeriya','Hungary','Istambul'],
    delay: 100
  },
  showAutocompleteOnFocus: true
});
});

$('.tokenfield1').tokenfield({
  autocomplete: {
    source: ['Red City','Blue City','United Kingdom','Australia','United Sates','Finland','Bulgeriya','Hungary','Istambul'],
    delay: 100
  },
  showAutocompleteOnFocus: true
});

Answer 2

您可以使用以下单击功能。它使用类tokenfield获取输入字段的外部宽度，并将该宽度分配给另一个输入字段

$('.show').click(function() {
    var width = $('.tokenfield').outerWidth();
    $('.another input').width(width);
    $('.another').slideToggle();
});