手风琴与jQuery“选择”选择：高度变得太大，然后再回弹

Question

我在jQuery Chosen内使用Twitter Bootstrap Accordion。我已经使用this question的答案解决了手风琴体被剪裁的Chosen下拉的问题。这仍然让我有另外一个问题：手风琴将向下滑动并增加高度，但它会增长太多，然后快速恢复到适当的高度。

This jsfiddle证明了这个问题。以下是问题的说明：

。

重现问题的代码

要reproduce这个问题，我使用了以下代码：

<div class="accordion" id="accordion1">
    <div class="accordion-group">
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#body1">First group</a>
        </div>
        <div class="accordion-body collapse" id="body1">
            <div class="box-content">
                <span>Body content!</span>
                <select multiple="multiple" class="chzn-select">
                    <option>Option A</option><option>Option B</option><option>Option C</option><option>Option D</option><option>Option E</option><option>Option F</option><option>Option G</option>
                </select>
            </div>
        </div>
    </div>
</div>

使用以下代码激活所选下拉列表：

$(document).ready(function() {
    $('.chzn-select').chosen();
});

使用此CSS修复上述溢出问题以及一些调试辅助工具：

/* Styles for visualizing the problem: */
body, .box-content { padding: 10px; }
.accordion-body { background-color: #EEE; }
.accordion-heading { background-color: #DDD; }

/* Required to make sure the chosen select can expand outside the box: */
.collapse.in { overflow: visible; }

。

我尝试过的事情：

有几件事我试图解决这个问题：

• 解决溢出问题的不同变体。但是，我注意到我的问题出现了regardless of the overflow issue。
• 使用常规选择。这显然是works around my issue，但并不是真正的解决方案。
• 在选择的选择中设置height: 0和display: none。 No effect。

。

问题

如何防止手风琴首先变得太高，让它直接变成正确的尺寸？

Answer 1

可以使用少量js来完成，请参阅this fiddle。相关代码：

$(document).ready(function() {
    $('.chzn-select').chosen();

    $(".box-content") .hover(function(){
        $(".chzn-container .chzn-drop") .css({"display":"block"});
    },function(){
        $(".chzn-container .chzn-drop") .css({"display":"none"});
    });    
});

或者，但沿着相同的行，您可以使用以下CSS来解决问题：

.accordion-body .chzn-container .chzn-drop { display: none; }
.accordion-body[style="height: auto;"] .chzn-container .chzn-drop { display: block; }

请参阅this fiddle了解演示。

Answer 2

有一个非常简单的CSS解决方案：

打开下拉列表时，

.chosen-container 会获得选择下拉类。

.chosen-container:not(.chosen-with-drop) .chosen-drop {
    display: none;
}

我今天遇到了同样的问题，这是我经过测试的解决方案。

Answer 3

与克里斯的答案相似;如果你使用bootstrap手风琴实现，你可以轻松隐藏列表，同时崩溃事件被触发，这样就不会计算它的高度。

.collapse, .collapsing {
  &:not(.in) .chosen-drop {
    display: none;
  }
}