Построение Bootstrap 4 аккордеонных карт для l oop через Django formset - PullRequest
Новая
       39

Построение Bootstrap 4 аккордеонных карт для l oop через Django formset

0 голосов
/ 06 апреля 2020

Context

Я пытаюсь заполнить bootstrap 4 аккордеона динамически созданными django формами.

Описание

Начиная с приведенного примера здесь , я пытаюсь построить компонент аккордеона из formset , состоящего из неопределенного количества форм (они создаются динамически).

Я хочу, чтобы все карты аккордеона были свернуты, кроме первой на начальном этапе.

Мне нужна одна карточка на форму.

То, что у меня сейчас есть

У меня сейчас есть что-то вроде этого: 

<div id="accordion">
  {% for form in formset %}

      <div class="card">

        <div id="heading_{{ forloop.counter }}" class="card-header">
          <h5 class="mb-0">
            <button class="btn btn-link" data-toggle="collapse" 
             data-target="#collapse_{{ forloop.counter }}" 
             aria-expanded="{% if forloop.counter == 1 %}
                             {{ true }}
                           {% else %}
                             {{ false }}
                           {% endif %}" 
             aria-controls="collapse_{{ forloop.counter }}">
              Form id is: {{ forloop.counter }} 
            </button>
          </h5>
        </div>

        <div id="collapse_{{ forloop.counter }}" class="collapse" 
         aria-labelledby="heading_{{ forloop.counter }}"
         data-parent="#accordion">
          <div class="card-body">
            {{ form.media }} # the actual content of the form
            {% bootstrap_form form layout='horizontal' %}
          </div>
        </div>

      </div>
  <hr>
  {% endfor %}
</div>

Но это глючит Мои формы отображаются в виде свернутых карточек, и когда я открываю одну из них, нажимая на нее, она немедленно закрывается.

Я также проверил с картой <div id="collapse_{{ forloop.counter }}" class="collapse show" после прочтения это , но это делает все карты открытыми одновременно, а здесь все наоборот; когда я закрываю один, он сразу же открывается снова.

Я также пытался изменить для обоих предыдущих случаев, aria-expanded="false" на aria-expanded="true" в заголовке, но это не меняет поведение ни в одном из двух случаи.

Я также пытался удалить data-parent=#accordion из карты div, как объяснено здесь , но безуспешно.

Изменить 2020-04-07 :

Вместо установки атрибута: 

aria-expanded="true"

Я установил его так: 

aria-expanded="{% if forloop.counter == 1 %}
                 {{ true }}
               {% else %}
                 {{ false }}
               {% endif %}"

Но это не меняет общего поведения.


Информация

Версия Boostrap: 4.1.1/css/bootstrap.min.css
И Django версия: 2.2.6.

...