折叠闪电组件中另一个表内的表行

如何解决折叠闪电组件中另一个表内的表行

我有一个要求，我需要显示客户记录列表，并且每个客户记录都应保留其联系记录，并且每个联系记录在下面的单独行中还将包含一些其他信息。 我想在每个帐户记录上都有一个可协作的buttonicon并联系reocrds。当我单击“客户记录可折叠”按钮时，它应该显示或隐藏其联系人，类似地，当我单击联系人的可折叠图标时，它应该显示或隐藏其下方的一些联系人。 这是我的示例代码。

<aura:component implements="flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" controller="Accountcon" access="global" >
    <aura:attribute name="accounts" type="Account[]"></aura:attribute>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <tr class="slds-line-height_reset">
            <tr class="slds-truncate" ><b>Show</b></tr>
        <td class="slds-truncate" ><b>Name</b></td>               
        <td class="slds-truncate" ><b>Type</b></td>
        </tr>
        <aura:iteration items="{!v.accounts}" var="ac" indexVar="myLocindex">
        <tr class="slds-hint-parent">
            <td> <lightning:buttonIcon value="{!myLocindex}" iconName="{!ac.expanded?'utility:chevronright':'utility:chevrondown'}" onclick="{!c.toggle}" ></lightning:buttonIcon>
            </td>
        <td class="slds-truncate">{!ac.Name}</td>    
        <td class="slds-truncate">{!ac.Type}</td>
            </tr>
            <aura:if isTrue="{!ac.expanded}">
               <tr class="slds-line-height_reset">
                    <td class="slds-truncate" ><b>show</b></td>
            <td class="slds-truncate" ><b>Last Name</b></td>
                       
        <td class="slds-truncate" ><b>Email</b></td>
        </tr>
                    <b>Contact details</b>
            <aura:iteration items="{!ac.Contacts}" var="con">
               
               <tr class="slds-hint-parent">
                   <td> <lightning:buttonIcon value="{!myLocindex}" iconName="{!ac.expanded?'utility:chevronright':'utility:chevrondown'}" onclick="{!c.toggle}" ></lightning:buttonIcon>
            </td>
                   <td class="slds-truncate">
                {!con.LastName}</td>
                   
                   <td class="slds-truncate">{!con.email}</td>
                </tr>
                <tr>this section should be shown or hidden onclick of collapsible button on the contact record </tr>
               </aura:iteration>
            </aura:if>
        
         </aura:iteration>
        </table>
</aura:component>




Controller.js

({
    doInit : function(component,event,helper) {
        var action = component.get("c.getacct");
        action.setCallback(this,function(action){
            component.set("v.accounts",action.getReturnValue());
        });
        $A.enqueueAction(action);
    },toggle :function(component,helper){
       
         var items = component.get("v.accounts"); 
        
        var index = event.getSource().get("v.value");
       items[index].expanded = !items[index].expanded;
       component.set("v.accounts",items);
        
        
    }
})


Apex class: 

public class AccountsController {
      @AuraEnabled
      public static List <Account> getAccounts() {
        return [SELECT Id,name,industry,Type,NumberOfEmployees,TickerSymbol,Phone,(select name,email,phone from contacts) FROM Account ORDER BY createdDate ASC limit 10];
      }
}

在我的代码中，当我单击联系人中的可折叠图标时，它会隐藏整个联系人部分。任何帮助，将不胜感激。 谢谢。