Щебетать саундтреком

Я беспокоился, чтобы добиться этого с помощью twitter bootstrap accordion: desired behavior

Как правило, использование аккордеона (плагин для разворачивания бутстрапов) не обязательно.

Я хочу достичь:

  • использовать bootstrap в качестве базовой структуры,
  • имеет фиксированную навигационную панель,
  • имеют полную ширину/высоту содержимого без полос прокрутки,
  • имеют 3 отдельных, складных панели содержимого (при этом только один расширяется),
  • нажмите на часть заголовка, разверните область содержимого (и сверните ранее расширенную),
  • прокрутка происходит только в одной расширенной панели содержимого (DIV 1 | 2 | 3 на рис.),
  • когда панели содержимого сбрасываются, чтобы их переполнение было скрыто,
  • У каждой области содержимого есть настраиваемая минимальная высота (для своего "заголовка" ),
  • это правильно работает для гибких макетов.

Было бы очень приятно получить какую-то помощь в этом, поскольку я думаю, что я теряю рассудок по этому поводу: (

Использование дополнительных плагинов jQuery (например, пользовательский интерфейс jQuery) разрешено.

Ответы

Ответ 1

HTML:

 <div class="ui-accordion" id="accordion">        
    <h4 class="ui-accordion-header">DIV1</h4>
    <div class="ui-accordion-content" id="accordion-div1"></div>
    <h4 class="ui-accordion-header">DIV2</h4>
    <div class="ui-accordion-content" id="accordion-div2"></div>
    <h4 class="ui-accordion-header">DIV3</h4>
    <div class="ui-accordion-content" id="accordion-div3"></div>
 </div>

CSS: (ничего особенного)

JS:

$("#accordion").accordion( {
  heightStyle : "fill"
});

Ответ 2

Я смог добиться этого с помощью JS:

var tabsHeight = $('.accordion-heading').outerHeight() * $('.accordion-heading').length;
var height = $('#your_accordion_container').innerHeight() - tabsHeight;

$('.accordion-inner').height(height - 1);

Я не понял, почему мне нужно делать - 1, но без него .accordion-inner был слишком большим.

Обязательно оберните это в функцию и вызовите его каждый раз, когда окно браузера будет изменено. Также убедитесь, что ваш .accordion-inner не имеет какого-либо вертикального заполнения или удаляет это дополнение с установленной высоты.