Я создаю приложение Rails и пытаюсь достичь определенной функциональности, связанной с Twitter Bootstrap collapse. Потерпите меня, когда я объясню это.
В настоящее время у меня есть следующее представление:
Когда каждая из этих кнопок нажата, их разделитель данных расширяется. Вид настроен следующим образом:
<button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right"><%= @app.keys.count %></span></button>
<button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button>
<button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button>
<div class="collapse indent" id="keys">
<!--content-->
</div>
<div class="collapse indent" id="attrs">
<!--content-->
</div>
<div class="collapse" id="edit">
<!--content-->
</div>
У меня они настроены так, потому что я хочу, чтобы кнопки были бок о бок подряд. Если я перемещаю кнопки, находящиеся прямо над представлением, они разворачиваются/сворачиваются, тогда кнопки складываются друг над другом.
Итак, моя конечная цель состоит в том, чтобы иметь три кнопки бок о бок и заставить их свернуть и расширить их соответствующие разделы. Однако текущие работы по настройке немного неудобны. Например, если кто-то расширяет раздел ключей, а затем расширяет раздел атрибутов, они должны прокручиваться под секцией ключей.
Существует два возможных решения этой проблемы. Один из них заключается в том, что нажатие одной кнопки приводит к тому, что другие 2 рушится. Это означало бы, что в любой момент времени расширяется только один из этих разделов.
Лучшее решение, я думаю, будет иметь его так, что когда ключи будут расширены, кнопки вправо перемещаются вниз к основанию клавиш div, а когда атрибуты будут расширены, кнопка редактирования деталей перемещается в нижнюю часть этого div. Это возможно? Я уже пытался это сделать, позволяя кнопкам складываться друг на друга и меняя их относительные местоположения через css, но это не сработало, потому что когда один из разделов был расширен, остальные кнопки оказались в неудобных местах в в середине расширенного раздела.
Наконец, я хотел бы попытаться сделать это без поведения стиля аккордеона, как указано на странице загрузки twitter, но если кто-то сможет убедить меня с точки зрения дизайна, что это предпочтительнее, я бы, конечно, пересмотрел.
