javascript - 防止 Bootstrap Accordion 扩展到父 div 之外

Question

首先 - 我完全是 jQuery 和 javascript 菜鸟，所以在回答我的问题时请记住这一点。

我的网页上有一个 Accordion 的东西。如何防止 Accordion 扩展到父 div 之外？

<div class="section" style="padding-top:30px; padding-bottom:30px; border-top:0; border-bottom:0; background:#FFF">
            <div class="container">
                <div class="row">
                    <div class="col-md-8">
                        <h4 class="classic-title"><span>Accordion Style</span></h4>

                            <!-- Accordion -->
                            <div class="panel-group" id="accordion">

                                    <!-- Start Accordion 1 -->
                                    <div class="panel panel-default">
                                        <div class="panel-heading">
                                            <h4 class="panel-title">
                                                <a data-toggle="collapse" data-parent="#accordion" href="#collapse-1">
                                                    <i class="icon-down-open-1 control-icon"></i>
                                                    <i class="icon-laptop-1"></i>some text here
                                                </a>
                                            </h4>
                                        </div>
                                        <div id="collapse-1" class="panel-collapse collapse in">
                                            <div class="panel-body">some text here</div>
                                        </div>
                                    </div><!-- End Accordion 1 -->

我没有包括结束标签，但别担心 - 一切都已正确关闭。

Accordion 中有 7 个元素 - 为了这个例子，我只包含了一个。第一次加载页面时，第一个元素会自动打开。没关系。当我打开第二个元素时，第一个元素会自动关闭。这也是有意的，而且很酷。困扰我的是，每次我打开一个不同的元素时，页面的整个底部(包括页脚)都会向上和向下抽动。这就是 Accordion 内部元素的工作方式，但我希望页面的其余部分“保持冷静”——在单击不同元素时根本不要移动。 Accordion 的父标签应该始终具有相同的大小。有任何想法吗？PS:尽管如此，我不知道提及这一点是否重要 - 该页面是一个 Bootstrap 响应模板。

Answer 1

这是 Bootstrap Accordion 容器的正常行为。一种方法是根据“更大”的 Accordion 元素将 Accordion 的高度锁定在最大高度。

http://jsfiddle.net/axvhcfob/1/

请看下面的脚本，它会在每次“展开”事件时重新评估高度，如果容器的高度变大则更改它。你不能在加载时这样做，因为折叠的元素有 -1px 高度。

$(function () {
    var maxHeight = 0;
    $('#accordion').on('shown.bs.collapse', function () {
        calculateHeight();
    })

    function calculateHeight() {
        var currentHeight = 0;
        $(".panel-heading").each(function (key, value) {
            currentHeight+=$(value).innerHeight();
        });
        currentHeight+=$(".collapse.in").innerHeight();  
        console.log($(".collapse.in").innerHeight());
        if(currentHeight>maxHeight)
        {
            maxHeight=currentHeight;
           $(".container").height(maxHeight);
        }
    }
});