Question

我有以下HTML，其中有一个折叠（ collapsebutton1 ）和展开按钮（ expandbutton1 ），它将折叠并展开div networkDevicesCollapsePanel ，它按预期工作。

现在我需要在每个

<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>

按钮单击下面的代码

 $("#expandbutton1").hide();

        $("#expandbutton1").click(function () {
            $('#networkDevicesLinks div.panel-collapse').addClass('in').css("height", "");
            $("#expandbutton1").hide();
            $("#collapsebutton1").show();

            $('a[data-toggle="collapse"]').each(function (index) {
                $(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
            });
        });

        $("#collapsebutton1").click(function () {
            $('#networkDevicesLinks div.panel-collapse').removeClass('in');
            $("#expandbutton1").show();
            $("#collapsebutton1").hide();

            $('a[data-toggle="collapse"]').each(function (index) {
                $(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
            });
        });
    });

Answer 1

它可能提供了一个想法，请尝试使用角度$ index切换箭头和切换客户div。

在角度上，我们可以为每个UL分配动态类，该类由“展开”和“折叠”按钮承载

                           <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>

下面的修订代码：

我能够在每次重复操作中放置折叠按钮，但是当我单击时，它会打开一个弹出窗口，而不是折叠和展开。请查看哪里出了错

<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>

在UL标签中扩展和折叠

1 个答案: