控制元素隐藏、显示的几种方法

一、控制元素隐藏、显示的几种方法？

1. 选择省份，vege的隐藏、cursor不可选、切植（js）

//menu-list的html
<div class="menu-list">
    <div *ngFor="let menu of menuList" class="menu" [ngClass]="{'visibility': menu.visibility}">
        <ng-container *ngIf="!menu.hide">

//menu-list的css
        .menu-list {
    .menu {
        text-align: right;
        margin-bottom: 10px;
        cursor: not-allowed;

        &.visibility {
            cursor: pointer;
        }

        &.visibility:hover {
            // box-shadow: 2px 2px 4px #888888;

            .select-items {
                .menu-item {
                    // display: inline-block;
                    width: 60px;
                }
            }
        }
    }
//menu-list的ts
   //选中省份，vege植被的cursor不可选
   setVisibility(menuName: string, visibility: boolean) {
    this.menuList.forEach((menu) => {
      if (menu.name == menuName) {
        menu.visibility = visibility;
      }
    });
  }
  //统计的状态与GIF关联 menuName谁    isHide显示/隐藏        
  setHide(menuName: string, isHide: boolean) {
    this.menuList.forEach((menu) => {
      if (menu.name == menuName) {
        menu.hide = isHide;
      }
    });
  }
  //切植
  selectValue(menuName: string, selectItem: any) {
    this.menuList.forEach((menu) => {
      if (menu.name === menuName) {
        menu.items.forEach(item => {
          item.active = item.value === selectItem;
          if (item.value === selectItem) {
            this.change.emit(new SelectMenu(menuName, selectItem, true));
          }
        })
      }
    });

  }

2. 增加删除图例(css)

 //法一
if (this.isShowArea && (this.status) === 0) {
            this.addLegendControl(this.areaLegend)
        } else {
            if (this.legendControl) {
                this.mapbox.removeControl(this.legendControl)
            }
        }
//法二
if (lyrId == null) {
    if (document.getElementsByClassName("legend")[0]) {
          document.getElementsByClassName("legend")[0].className = "hidden legend";
        }
}else{
    //若不设置legendShow=true，loadYield()函数加载图层时，会默认hidden图例
    // if (this.legendShow) {
    //   document.getElementsByClassName("legend")[0].className = "show legend";
    //  } else {
    //   document.getElementsByClassName("legend")[0].className = "hidden legend";
    // }
        this.legendShow = true;
        if (document.getElementsByClassName("legend")[0]) {
          document.getElementsByClassName("legend")[0].className = "show legend";
        }
        }
      //样式
.show{
    display: block;
}
.hidden{
    display: none;
}
.legend {
    color: #333333;
    width: 100px;
    background-color: #fff;
    border-radius: 3px;
    bottom: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10);
    font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
    padding: 10px;
    position: absolute;
    left: 0;
    z-index: 1;
    display: block;
}

3. 按钮isShowStatType=false，关闭checkbox选中显示，清空站点选择(css)

点击按钮-checkbox无选择、地图无对应图层信息-checkbox选择后、地图显示对应图层信息，再点击按钮-地图无图层信息

//html
<span class="stat-select-btn" (click)="isShowStatType=!isShowStatType;selectStatType($event,'国家站')"></span>
      <div class="stat-select-check" [ngStyle]="{'display': isShowStatType?'block':'none'}">
        <label>
          <input type="checkbox" name="statType" (click)="selectStatType($event,'国家站')" [(ngModel)]="gjzStatus">
          <span>国家站</span>
        </label>
       </div>
//ts
selectStatType(e, type) {
    if (!this.isShowStatType) {
      //关闭checkbox选中显示
      this.qyzStatus = false;
      this.cliStatus = false;
      this.gjzStatus = false;
      //清空站点选择
      this.statTypeSet = new Set();
    }
    ...
}