防止引導手風琴擴展到父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>