手风琴只会向错误的方向扩展，仅针对第一个元素

Question

我有一个表，其中列出了有关策略分类器的信息。 ng-repeat指令每个分类器一次显示第2行，其中第二行包含一个子表，除非单击该行的fi雪佛龙箭头，否则该表已隐藏。第一行包含有关分类器的基本信息。第二行包含仅在需要时显示的其他信息。该信息采用该分类器的规则子表列表的形式。

由于某种原因，仅当单击第一个分类器上的箭头时，表格才会在分类器信息上方而不是下方扩展。所有其他行，将按需在下方展开。这是没有道理的，因为下面的HTML会强制顺序成为分类器信息行始终位于规则表行顶部的位置。

我正在使用数据表来显示表。

<table id="classifier-association-table" class="row-border hover info dataTable no-footer"
     style="border-top: 2px solid #CCC;">
    <thead>
        <tr>
            <th></th>
            <th ng-click="sortAttachedSG('name')">
                <div class="table-vertical-line"></div>
                <div>{{ 'CLASSIFIER_NAME' | translate }}</div>
                <div ng-class="sgAttachedCondition ? 'sort-ascend' : 'sort-descend'" id="sortName"
                     class="sort-icon" style="display: block;" ng-show="sgAttachedNameSort">
                    <span class="fi-chevron"></span>
                </div>
            </th>
            <th ng-click="sortAttachedSG('description')">
                <div class="table-vertical-line"></div>
                <div>{{ 'CLASSIFIER_TYPE' | translate }}</div>
                <div ng-class="sgAttachedCondition ? 'sort-ascend' : 'sort-descend'" id="sortDesc"
                     class="sort-icon" style="display: block;" ng-show="sgAttachedDescSort">
                    <span class="fi-chevron"></span>
                </div>
            </th>
        </tr>
    </thead>
    <tbody ng-repeat="item in classifierData" data-ng-switch on="attachedRulesCollapse[$index]">
        <tr ng-class="getSelectedClass(group)">
            <td>
                <input type="checkbox" ng-checked="isSelected(item)"
                       ng-click="checkclick($event,item)" >
                <div class="rules-accordion-arrow"
                     ng-class="attachedRulesCollapse[$index] ? 'sort-ascend' : ''"
                     ng-click="showRulesForClassifier($index, item, true)" id="showRulesId">
                    <span class="fi-chevron"></span>
                </div>
            </td>
            <td>
                <div class="name-overflow">{{item.name}}</div>
            </td>
            <td>
                <div class="name-overflow">{{item.type}}</div>
            </td>
        </tr>
        <tr data-ng-switch-when="true">
            <td colspan="3">
                <div class="la-ball-clip-rotate icon-button" ng-show='rulesLoadingFlag'
                             style="height: 20px;margin-top: -7px; padding-left: 30rem">
                    <div style="width : 25px;height: 25px;" ng-show="true"></div>
                </div>
                <div class="table-conainer" id="rulesTable" ng-show="!rulesLoadingFlag">
                    <table id='rules-table' class="row-border hover info dataTable no-footer">
                        <thead>
                            <tr>
                                <th>
                                    <div class="table-vertical-line"></div>
                                    <div>{{ 'CLASSIFIER_RULES_IP_PROTOCOL' | translate }}</div>
                                    <div class="sort-icon"><span class="fi-chevron"></span>
                                    </div>
                                </th>
                                <th>
                                    <div class="table-vertical-line"></div>
                                    <div>{{ 'CLASSIFIER_RULES_IP_PROTOCOL_NUMBER' | translate }}
                                    </div>
                                    <div class="sort-icon"><span class="fi-chevron"></span>
                                    </div>
                                </th>
                                <th>
                                    <div class="table-vertical-line"></div>
                                    <div class="ng-binding">
                                        {{ 'CLASSIFIER_RULES_SOURCE_IP' | translate }}
                                    </div>
                                </th>
                                <th>
                                    <div class="table-vertical-line"></div>
                                        <div>{{'CLASSIFIER_RULES_SOURCE_PORT' | translate}}
                                            <span id="portRangeToolTipId"
                                                class="fi-help port-range-tooltip"
                                                tabindex="0"
                                                tooltip-class="vtsTooltip"
                                                tooltip="{{'SECURITY_GROUPS_RULES_TOOLTIP' |
                                                    translate}}"
                                                tooltip-append-to-body="true"
                                                tooltip-placement="top-right"
                                                tooltip-trigger="mouseenter focus mouseleave blur">
                                            </span>
                                        </div>
                                </th>
                                <th>
                                    <div class="table-vertical-line"></div>
                                    <div>{{ 'CLASSIFIER_RULES_DESTINATION_IP' | translate }}</div>
                                </th>
                                <th>
                                    <div class="table-vertical-line"></div>
                                    <div>{{ 'CLASSIFIER_RULES_DESTINATION_PORT' | translate }}
                                        <span id="portRangeToolTipId"
                                            class="fi-help port-range-tooltip"
                                            tabindex="0"
                                            tooltip-class="vtsTooltip"
                                            tooltip="{{'SECURITY_GROUPS_RULES_TOOLTIP' |
                                                translate}}"
                                            tooltip-append-to-body="true"
                                            tooltip-placement="top-right"
                                            tooltip-trigger="mouseenter focus mouseleave blur">
                                        </span>
                                    </div>
                                </th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="item in rules" ng-class="getSelectedClass(rule)">
                                <td>
                                    <div class="name-overflow" data-x-rule-id={{item['rule-id']}}>
                                        {{item.protocol}}
                                    </div>
                                </td>
                                <td class="name-overflow">{{item.protcolnumber}}</td>
                                <td ng-bind="item['source-ip']" class="name-overflow"></td>
                                <td class="name-overflow">
                                    <span>{{ item['source-port-range'] }}</span>
                                </td>
                                <td ng-bind="item['destination-ip']" class="name-overflow"></td>
                                <td class="name-overflow">
                                    <span>{{ item['destination-port-range'] }}</span>
                                </td>
                            </tr>
                            <tr ng-show="!rules.length && isEditMode">
                                <td class="dataTables_empty" colspan="8">
                                    {{'NO_DATA_AVAILABLE_IN_TABLE' | translate}}
                                </td>
                            </tr>
                            <tr ng-show="!isEditMode">
                                <td class="dataTables_empty" colspan="8">
                                    {{'CLASSIFIER_CREATE_RULES_DISABLED' | translate}}
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </td>
        </tr>
    </tbody>
</table>

我怀疑这可能是一个棘手的问题，但我不确定。如果您需要更多代码，请告诉我。

有人知道为什么会这样吗？