Как создать динамический аккордеон? - PullRequest
Новая
       6

Как создать динамический аккордеон?

0 голосов
/ 21 сентября 2018

Я пытаюсь сделать мой аккордеон динамичным в моем HTML-шаблоне, и я не знаю, как я могу это сделать.

Мой HTML-шаблон хорош, но я не знаю, как я могу добавитьчасть javascript, чтобы открывать / закрывать подпанели с переменной {{category}} в качестве основной панели.

Это мой HTML-код: 

{% for category in category_list %}
    <div class="panel-group accordion" id="accordion" role="tablist" aria-multiselectable="true">

      <div class="panel panel-default">
          <div class="panel-heading" role="tab">
              <h4 class="panel-title">
                  <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                      <i class="more-less glyphicon glyphicon-plus"></i>
                      {{ category }}
                  </a>
              </h4>
          </div>
          {% for publication in category.publication.all %}
          <div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="accordion">
              <div class="panel-body">
                    {{ publication }}
              </div>
           </div>
          {% endfor %}
      </div>

    </div>
{% endfor %}

Я довольно новичок в Javascript и что-то сделалтак, но это не работает: 

function toggleIcon(e) {
    $(e.target)
        .prev('.panel-heading')
        .find(".more-less")
        .toggleClass('glyphicon-plus glyphicon-minus');
}
$('.panel-group').on('hidden.bs.collapse', toggleIcon);
$('.panel-group').on('shown.bs.collapse', toggleIcon);

Я не знаю почему, но он открывает только первую панель аккордеона, даже если я нажимаю на второй или третий ..

enter image description here

1 Ответ

0 голосов
/ 21 сентября 2018

Код, который вы показываете, не имеет отношения к скрытию / отображению панелей, поэтому я предполагаю, что вы используете библиотеку JS И что эта библиотека использует идентификаторы и данные для отображения объектов.

Если это так, все, что вам нужно, это использовать уникальные идентификаторы, иначе он всегда остановится на первом accordion найденном.

Чтобы сделать это, используйте ваши индексы цикла: 

<div class="panel-group accordion" id="accordion_{{ category.id }}" role="tablist" aria-multiselectable="true">

И свяжите его с вашим a следующим образом: 

<a role="button" data-toggle="collapse" data-parent="#accordion_{{ category.id }}" href="#collapseOne_{{ issue }}" aria-expanded="true" aria-controls="collapseOne">

Здесь возникает проблема: вам также нужно иметь один уникальный идентификатор для каждого CollapseOne, но publication цикл - после создания a.В любом случае, странно иметь один a открытый несколько элементов, так почему бы не сделать его одним? 

<div id="collapseOne_{{ category.id }}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="accordion">
{% for publication in category.publication.all %}
          <div class="panel-body">
                {{ publication }}
          </div>
{% endfor %}
</div>

Заменить предыдущий {{ issue }} в a на {{ category }}, и вы должнызадавать.Теперь, чтобы определить, работает ли ваша библиотека так, как предполагалось ^^

Вам нужно установить {{category.id}}, потому что если ваше поле category содержит пробелы, оно не будет работать.

Также яне используется для шаблонов, поэтому я надеюсь, что это позволит вам сделать это: p

...