如何折叠和扩展手风琴的每个特定部分

Question

AngularJs手风琴流程

我很难掌握操纵手风琴的概念我有一个逐步实现手风琴的模块。在完成模块的第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>

我最初的方法是给模块的每个部分和id并通过JS操纵每个部分如何折叠和扩展手风琴的每个特定部分？

Answer 1

这是一个小提琴：https://jsfiddle.net/MSclavi/e9vhs0jL/1/

您可以使用相同的想法，但手风琴内有一个按钮。如果你需要做一些额外的事情（数据验证等），你可以通过按钮ng-click调用一个函数。