1

Twitter Bootstrap Accordion内でjQuery 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 に答える