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

【问题标题】：How to change height of the map element on button click?如何在按钮单击时更改地图元素的高度？
【发布时间】：2019-08-30 20:48:53
【问题描述】：

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

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

有什么想法吗？

**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);

}

【问题讨论】：

我在你的 CSS 中看到了 .This 和 .THIS。这是什么？
抱歉让你困惑了，我更新了。
你能分享你的完整代码，包括.buttonstate按钮吗？谢谢
@HassanSiddiqui 我添加了我设法使其工作的代码，但现在地图在屏幕上没有背景，基本上只显示地图上没有背景的标记。我也检查了，由于某种原因，salesforce 移动应用程序不再显示地图，只有灰色。谢谢
您是否在任何服务器或任何工作示例上部署了您的代码？请分享链接。谢谢

标签： javascript css salesforce salesforce-lightning aura-framework

【解决方案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改变的

【讨论】：