html - 如何隐藏移动媒体查询上的按钮并在点击时显示它们？

Question

我有一个下拉按钮，我想在移动布局上隐藏它。在移动布局上应该有 1 个主按钮，点击这个按钮应该触发显示下拉按钮。截至目前，在移动覆盖上，主按钮被下拉按钮覆盖。我怎样才能实现这个功能？

这是我的 scss 代码

@media (min-width: 700px) {
  .bot {
    display: none;
  }
}

@if (max-width: 700px) {
  .tools {
    display: block;
  }
} @else {
  .tools {
    display: none;
  }
}

  .toolss {

    background-color: $-white;
    height: 100%;
    left: 0;
    overflow-y: auto;
    padding-bottom: 65px;


    .tools {
      background: white;
      border: 0;
      border-bottom: 1px dark-gray-shade-light;
      border-radius: none;
      border-top: 1px dark-gray-shade-light;
      height: auto;

    }
    }

  .tools {
    background-color: white;
    display: block;


    @media (max-width: 700px) {
      display: block;
    }
}}

这是我的html代码

<ng-container>
    <button class="bot" (click)="fill()">Data 
    </button>
    <div class="toolss">
      <div class="tools">
        <dropdown-overlay [labelDrop]="i18nService
          ></dropdown-overlay>
      </div>
    </div>

Answer 1

DEMO

SASS

.hide-dropdown{
   display: block;
}

@media(max-width: 700px) {
    .hide-dropdown{
        display: none;
    }
}

.hide-button {
    display: none
}

@media(max-width: 700px) {
    .hide-button {
        display: block;
    }
}

HTML

<ng-container>
    <button class="bot hide-button" (click)="fill()">Data 
    </button>
    <div class="toolss" [ngClass]="{'hide-dropdown': !isClicked}">
      <div class="tools">
        <dropdown-overlay [labelDrop]="i18nService
          ></dropdown-overlay>
      </div>
    </div>
</ng-container>

TS

isClicked: boolean = false;

fill() {
    this.isClicked = true;
}