1

我在Twitter Bootstrap Accordion中使用jQuery Chosen。我已经使用this question的答案解决了手风琴体剪切的 Chosen 下拉列表的问题。这仍然给我留下了另一个问题：手风琴会向下滑动并变高，但它会长得太多，然后又恢复到适当的高度。

这个 jsfiddle演示了这个问题。这是问题的说明：

收起、展开、展开的舞台截图

.

重现问题的代码

为了重现此问题，我使用了以下代码：

<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; }

.

我尝试过的事情：

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

.

问题

你怎么能从一开始就防止手风琴长得太高，并立即让它长到正确的尺寸？

4

3 回答 3

3

它可以用一点点 js 来完成，看这个 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; }

请参阅此小提琴以进行演示。

于 2013-07-25T07:06:08.257 回答
0

类似于克里斯的回答；如果您使用引导手风琴来实现，您可以在触发折叠事件时轻松隐藏列表，以便不计算其高度。

.collapse, .collapsing {
  &:not(.in) .chosen-drop {
    display: none;
  }
}
于 2016-09-15T15:49:09.207 回答
0

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

.chosen-container在打开下拉列表时获取类选择下拉。

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

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

于 2015-11-26T18:00:29.673 回答