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

【问题标题】：How can I hide button on mobile media query and show them onclick?如何隐藏移动媒体查询上的按钮并在点击时显示它们？
【发布时间】：2019-10-31 01:33:16
【问题描述】：

我有dropdown button，我想在mobile layout 上隐藏它。在移动布局上应该有1 main button，点击这个按钮应该trigger 显示下拉按钮。截至目前，在移动覆盖上，主按钮与下拉按钮重叠。我怎样才能实现这个功能？

这是我的 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>

【问题讨论】：

标签： html angular media-queries scss-lint

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

isClicked: boolean = false;

fill() {
    this.isClicked = true;
}

【讨论】：