如何在按钮单击时更改地图元素的高度？

Question

我想在按钮单击时来回移除样式，但是当我尝试调整大小时，地图会在整个屏幕上呈现，但没有任何背景，只有其上的标记。

所以基本上我想删除样式并隐藏列表元素，只在一次单击和下一次显示地图元素时再次显示列表并调整地图的大小。

有任何想法吗 ？

**Updated**

  **aura component** 

<aura:component >
<aura:attribute name="map" type="Object"/>
<aura:attribute name="buttonstate" type="Boolean" default="false"/>

<div aura:id= "screen">        
 <div id="map" aura:id="mapSize" class="mapSize" style="position:relative;">   
        <lightning:button class="button" aura:id="buttonList" label="Button" onclick="{!c.handleClick}" />
 </div>
</div>
   <div  aura:id="listDiv" class ="listDiv">
   <c:List  />
    </div>        
  </div>       
</aura:component>

**CSS**

   .cAccountMap .mapSize{
   width: 100%;
   height: 80%; 
}

.cAccountMap .mapTestSize{
    height: 100%;
}


.THIS .listDiv{
 height: 20%;
}

}

**Javascript** 

   handleClick : function(component,event,helper){
      var buttonName = event.getSource();
      var elements = document.getElementsByClassName("listDiv");
     var buttonstate = component.get('v.buttonstate');
    var cmpTarget = component.find('mapSize');
    if(buttonstate==false){
        buttonName.set('v.label', 'LALA');
        elements[0].style.display = 'none';
        $A.util.removeClass(cmpTarget, 'mapSize');
        $A.util.addClass(cmpTarget, 'mapTestSize');      
    }else{
        buttonName.set('v.label', 'gogo');
        elements[0].style.display = '';
        $A.util.addClass(cmpTarget, 'mapSize');

        $A.util.removeClass(cmpTarget, 'mapTestSize');  
    }
    component.set('v.buttonstate', !buttonstate);

}

Answer 1

After multiple tries  i managed to find the solution 
aura component is the same

css 
.cAccountMap .mapSize{
  width: 100%;
  height: 65%; 
}

.THIS .listDiv{
 height: 35%;
}

.THIS .listHideDiv{
 height: 0%;
}

使用Javascript

 handleClick : function(component,event,helper){
    var changeViewButton = event.getSource();
    var listDiv = document.getElementsByClassName("listDiv");
    var mapDiv = document.getElementsByClassName("mapSize");
    var buttonstate = component.get('v.buttonstate');
    var cmpList = component.find('listDiv');

    if(buttonstate==false){
        changeViewButton.set('v.label', 'lala');
        listDiv[0].style.display = 'none';
        mapDiv[0].style.height = '100%';
        $A.util.addClass(cmpList, 'listHideDiv');
    }else{
        changeViewButton.set('v.label', 'gogo');
        $A.util.removeClass(cmpList, 'listHideDiv');
        listDiv[0].style.display = '';
        mapDiv[0].style.height = '65%';
    }
    component.set('v.buttonstate', !buttonstate);

}

所以基本上地图高度样式是从javascript更改的