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

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调用一个函数。