Как я могу свернуть и расширить каждую конкретную часть аккордеона - PullRequest
0 голосов
/ 04 апреля 2019

AngularJs Accordion Flow

Мне трудно понять концепцию управления аккордеонами. У меня есть пошаговый модуль, реализованный в виде аккордеона.После завершения части 1 модуля я хотел бы свернуть часть 1 и развернуть часть 2. Как только часть 2 модуля будет завершена, я хочу свернуть часть 2 и развернуть часть 3 Я использую аккордеон следующим образом: https://jsfiddle.net/b0yc246z/

<div ng-init="accordion=1">
<h3 class="accordion" ng-class="{active:accordion==1}">
    <a href ng-click="accordion = 1">Section 1</a>
</h3>
<p class="accordion-content" ng-show="accordion==1">Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>

<h3 class="accordion" ng-class="{active:accordion==2}">
    <a href ng-click="accordion = 2">Section 2</a>
</h3>
<p class="accordion-content" ng-show="accordion==2">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using</p>

<h3 class="accordion" ng-class="{active:accordion==3}">
    <a href ng-click="accordion = 3">Section 3</a>
</h3>
<p class="accordion-content" ng-show="accordion==3">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form</p>

Мой первоначальный подход заключался в предоставлении каждой части модуля и идентификатора и манипулирования каждой частью с помощью JS. Как можно свернуть и развернуть каждую конкретную частьаккордеон

1 Ответ

0 голосов
/ 13 апреля 2019

Вот скрипка: https://jsfiddle.net/MSclavi/e9vhs0jL/1/

Вы можете использовать ту же идею, но с кнопкой внутри гармошки.Если вам нужно что-то сделать дополнительно (проверка данных и т. Д.), Вы можете вызвать функцию с помощью кнопок ng-click.

...