防止引导手风琴扩展到父div之外

Question

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

我的网页上有一个手风琴的东西。 如何防止手风琴扩展到父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 -->

我没有包含结束标记，但是不用担心-一切都已正确关闭。

我的手风琴中有7个元素-为了这个例子，我只包含了一个。 首次加载页面时，第一个元素自动打开。 没关系。 当我打开第二个元素时，第一个元素会自动关闭。 那也是有意的，很酷。 令我感到困扰的是，每次我打开一个不同的元素时，页面的整个底部（包括脚）都会使上下左右的抽搐。 这应该适用于手风琴小东西中的元素，但是我希望页面的其余部分“保持冷静”-单击不同元素时根本不要动。 手风琴的父标签在任何时候都应该是相同的大小。 有任何想法吗？ PS：不过，我不知道提到这一点是否很重要-该页面是引导响应模板。

Answer 1

这是Bootstrap手风琴容器的正常行为。 一种方法是根据“更大”的手风琴项目将手风琴的高度锁定在最大高度上。

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

Answer 2

您可以使用jQuery UI Accordion做到这一点：

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>



<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>