Javascript UL标签中的展开和折叠

我有下面的HTML，其中有一个折叠（collapsebutton1）和展开按钮（expandbutton1），它将折叠和展开div网络设备collapsepanel，这是按预期工作的

现在我需要在每个

中进行折叠和扩展。这里有三个UL，但可能会有更多的时间。如何做到这一点

<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
 <div style="float:right;">                                       
                <div ng-show="ciAttributesCount>0" id="collapsebutton1" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
                <div ng-show="ciAttributesCount>0" id="expandbutton1" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
            </div>
 <div class="panel-collapse collapse in" id="networkDevicesCollapsePanel">
                    <ul ng-repeat="nav in ciRelationshipHierarchyBySection" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list">
                        <li>
                            <a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a> <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span><br />

                        </li>
                    </ul>
                    </div>
</div>
</div>

---

它可能提供了一个想法，尝试使用angular$index切换箭头和切换客户端div
在angular中，我们可以为每个UL分配动态类，这些动态类由expand And And collapse按钮托管

                           <div class="col-xs-4">
                                    <div class="panel" id="networkDevicesLinks">
                                        <div style="float:right;" ng-repeat="nav in ciRelationshipHierarchyBySection track by $index">
                                            <div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
                                            <div ng-show="ciAttributesCount" id="expandbutton1_{{$index}}" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
                                        </div>
                                        <div class="" >
                                            <ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">
                                                <li>
                                                    <a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a> <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span><br />
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

全部崩溃
全部展开


{{nav.identificationsourcename}}源Id:{{nav.IdentificationSourceId}}

修订代码如下：
我可以在每次重复中放置折叠按钮，但当我单击时，它会打开一个弹出窗口，而不是折叠和展开。请看看哪里不对

<div class="">

                        <ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">

                            <li>
 <div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse  no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
                                <a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a>
                                <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span>
                                <br />
                                <span style="padding: 2px 12px;">Data Source: {{nav.DataSource}}</span>
                                <br />
                                <span style="padding: 2px 12px;">Create New: {{nav.IsCreateNew}}</span>
                                <br />
                            </li>
                        </ul>
                    </div>

全部崩溃
{{nav.IdentifySourceName}
源Id:{{nav.IdentificationSourceId}


数据源：{{nav.DataSource}


创建新：{nav.IsCreateNew}

您是否询问如何将新的展开/折叠按钮绑定到各自的
？是的。。。我需要为每个UL重复添加按钮以扩展和折叠更新真实代码而不是渲染代码Hi@SmartestVEGA，您基本上想要在手风琴中创建手风琴，对吗？你有没有看过类似的问题及其答案：？这些答案是关于jquery和javascript的，我需要它在AngularJS中几乎有一些对齐问题…让我检查一下三个展开和折叠按钮是否放在一起，但理想情况下，它们应该在每次重复的左侧附近，这就是问题所在，在这种情况下，我们需要将展开折叠按钮移动到上面的ul标签。和附加每个ul使用CSSprevius代码更好，现在当我点击展开，它是打开一个弹出窗口，更多只有一个折叠按钮工作，你能还原前一个请

<div class="">

                        <ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">

                            <li>
 <div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse  no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
                                <a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a>
                                <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span>
                                <br />
                                <span style="padding: 2px 12px;">Data Source: {{nav.DataSource}}</span>
                                <br />
                                <span style="padding: 2px 12px;">Create New: {{nav.IsCreateNew}}</span>
                                <br />
                            </li>
                        </ul>
                    </div>