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

Posted 2023-05-08

【中文标题】如何在按钮单击时更改地图元素的高度？

【英文标题】：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 移动应用程序不再显示地图，只有灰色。谢谢

您是否在任何服务器或任何工作示例上部署了您的代码？请分享链接。谢谢

【参考方案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改变的