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个元素 - 为了这个例子，我只包括一个。当页面第一次加载时，第一个元素会自动打开。没关系。当我打开第二个元素时，第一个元素会自动关闭。这也是有意的，而且很酷。困扰我的是，每当我打开一个不同的元素时，包括FOOTER在内的整个页面底部都会上下颠簸。它是如何为手风琴内部的元素工作的，但我希望页面的其余部分“保持冷静” - 当点击不同的元素时根本不移动。手风琴的父标签应始终具有相同的大小。有任何想法吗？ PS：我不知道提及这一点是否重要 - 不过 - 该页面是一个自举响应模板。

Answer 1

这是Bootstrap手风琴容器的正常行为。一种方法是将手风琴的高度锁定在最大高度上，具体取决于＆＃34;更大的＆＃34;手风琴项目。

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

请参阅下面的脚本，它会重新评估每个＆＃34;展开的高度＆＃34;事件并更改容器的高度（如果更大）。您无法在加载时执行此操作，因为折叠的项目的高度为-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>

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

2 个答案: