Question

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

因此，基本上我想删除样式并隐藏list元素，只单击一次显示map元素，然后单击下一次以再次显示列表并调整地图的大小。

有什么想法吗？

**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更改

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

1 个答案: