如何通过单击按钮在SCSS中显示隐藏的按钮？

Question

我在移动版式中有3个隐藏的按钮（使用媒体查询）。在单击主按钮时，我试图显示下拉按钮。如何在angular中使用SCSS实现此目的？

注意-.filter-button类是在移动视图中显示的主按钮，单击.filter-button时，.gdx-table-filter类包含必须显示的下拉按钮

这是我的代码

@media screen and (max-width: $trp-layout-breakpoint-mobile-end) {

  .filter-button {
    background: $trp-white;
    border: 1px solid $trp-black;
    border-radius: 2px;
    color: $trp-dark-gray;
    display: block;
    float: right;
    font-family: $trp-font-family-nimbus-sans-bold;
    font-size: 18px;
    height: 48px;
    text-align: left;
    width: 100%;

    @media (min-width: $trp-layout-breakpoint-tablet-start) {
      display: none;
    }

  }
}

@media (min-width: $trp-layout-breakpoint-mobile-end) {
  .filter-button {
    display: none;
  }
}

@if (max-width: $trp-layout-breakpoint-mobile-end) {
  .gdx-table-filter {
    display: none;
  }
}

@else {
  .gdx-table-filter {
    display: block;
  }
}


.gdx-table-filters {
  display: flex;
  flex-wrap: wrap;

  .gdx-table-filters {

    background-color: $trp-white;
    height: 100%;
    left: 0;
    overflow-y: auto;
    padding-bottom: 65px;
    position: fixed;
    top: 0;
    width: 100%;


    .gdx-table-filter {
      background: $trp-white;
      border: 0;
      border-bottom: 1px solid $trp-dark-gray-shade-light;
      border-radius: none;
      border-top: 1px soild $trp-dark-gray-shade-light;
      height: auto;
      margin: 0;
      max-width: 100%;
    }

    .option-bar {
      background: $trp-white;
      z-index: 500;
    }

    ::ng-deep {
      .gdx-dropdown-overlay {
        height: auto;
        position: relative;
      }

      .open {
        ul {
          position: relative;
          top: auto;
        }
      }
    }

  }

  @media screen and (min-width:$trp-layout-breakpoint-mobile-end) {

    .gdx-table-filter {
      background-color: $trp-white;
      border: 1px solid $trp-black;
      border-radius: 2px;
      display: block;
      flex-basis: 100%;
      flex-grow: 1;
      flex-shrink: 1;
      height: 72px;
      margin-right: 10px;
      max-width: 224px;

      // @media (max-width: $trp-layout-breakpoint-tablet-start) {
      //   display: none;
      // }

      &.disabled {
        border-color: $trp-silver-chalice;
        color: $trp-silver-chalice;
        opacity: .4;
        pointer-events: none;

        &:hover {
          cursor: no-drop;
        }
      }

      label {
        color: $trp-dark-gray-shade-light;
        font-family: $trp-font-family-nimbus-sans-regular;
        font-size: $font-size-16;
        margin: 18px 45px 14px 16px;

        fa-icon {
          font-size: 26px;
          position: absolute;
          right: 5px;
        }
      }
    }
  }

}

.investment-table {
  border-collapse: collapse;
}

Answer 1

您能创建一个闪电战吗？