предотвращать расширение бутстрапового аккордеона за пределами родительского 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 аккордеона:

<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>