jQuery slideToggle 与 bootstrap

Question

我正在尝试使用 slideToggle 来显示我网站的部分内容。在每个部分中，我想使用 bootstrap 网格系统来布置该部分中的内容。问题是 slideToggle 重置为没有高度（这似乎是因为存在

{ float: left; }

对于 bootstrap col-* 元素）。

这是一个例子：http://jsfiddle.net/rcs2tej0/。我已将 bootstrap col-* css 与底部的一些我自己的粘贴到 fiddle 中。第 1 部分是默认的 bootstrap css。第 2 部分删除了浮动，但它现在不会正确地跟随网格。

Answer 1

我想这就是你想要的：

只需将 overflow:auto; 添加到 CSS 中的 .section-body 即可解决您的问题。

替换代码：

.section-body {
    display: none;
    border: 1px solid black;
    overflow:auto; /* ADDED */
}

Working : Demo

Answer 2

为什么不使用 collapse from bootstrap ... check this DEMO

<body>
    <div class="panel-group" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="section1">
                 <h4 class="panel-title">
                    <a class="collapsed" role="button" 
                       data-toggle="collapse" href="#body1" 
                       aria-expanded="false" aria-controls="body1">
                       Section 1
                    </a>
                  </h4>
            </div>
            <div id="body1" class="panel-collapse collapse"
                 role="tabpanel" aria-labelledby="section1">
                <div class="panel-body">
                    <div class='col-xs-4 col-sm-4'>Hello</div>
                    <div class='col-xs-4 col-sm-4'>I</div>
                    <div class='col-xs-4 col-sm-4'>Am</div>
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="section2">
                 <h4 class="panel-title">
                    <a class="collapsed" role="button" 
                       data-toggle="collapse" href="#body2" 
                       aria-expanded="false" aria-controls="body2">
                       Section 2
                    </a>
                  </h4>
            </div>
            <div id="body2" class="panel-collapse collapse"
                 role="tabpanel" aria-labelledby="section2">
                <div class="panel-body">
                    <div class='col-xs-4 no-float'>Kyle</div>
                    <div class='col-xs-4 no-float'>Who</div>
                    <div class='col-xs-4 no-float'>Are</div>
                    <div class='col-xs-12 no-float'>You?
                        <button id='add_word'>Add Word</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

jQuery slideToggle 与 bootstrap

jQuery slideToggle with bootstrap

css

jquery

slidetoggle

twitter-bootstrap