如何隐藏scss中另一个按钮的按钮onclick？

Question

单击Show 按钮时，我想更改类的属性。当Show 按钮被点击时data class 下拉按钮应该隐藏。作为试用，我尝试在悬停时应用背景颜色属性，效果很好。但是，当 onclick 尝试隐藏 data class dropdown 时，它不起作用。如何使用上述方法实现这样的功能o

Answer 1

在您的component.ts 中，您可以有一个名为shouldHide 的变量，例如：

  // component.ts
  shouldHide = false;

您可以在点击时切换它，并根据该状态隐藏数据类 div：

<!-- component.html -->
<ng-container">
        <input type="checkbox" id="button" class="check" />
        <label class="filter-button" for="button" (click)="toggling()">Monday </label>
        <div class="filters">
          <div class="data" *ngIf="shouldHide">
            <overlay [dropdownLabel]="i18nLabelService.investment.translation">
            </overlay>
          </div>
          <div class="option-bar" *ngIf="showFilterOverlay">
            <button (click)="shouldHide = !shouldHide">Show {{Data?.length }}/{{ DataTable.length }}
              funds</button>
          </div>
        </div>
      </ng-container>

要通过 CSS 实现，您可以添加一个条件类，例如：

<!-- component.html -->
<ng-container">
        <input type="checkbox" id="button" class="check" />
        <label class="filter-button" for="button" (click)="toggling()">Monday </label>
        <div class="filters">
          <div class="data" [class.hidden]="shouldHide">
            <overlay [dropdownLabel]="i18nLabelService.investment.translation">
            </overlay>
          </div>
          <div class="option-bar" *ngIf="showFilterOverlay">
            <button (click)="shouldHide = !shouldHide">Show {{Data?.length }}/{{ DataTable.length }}
              funds</button>
          </div>
        </div>
      </ng-container>

然后在你的 scss 中：

div.data {
  &.hidden {
    display: none;
  }
}