Div显示在页面上，除非按下按钮，否则不显示

Question

我有一个SVG图，宽度和高度均为100％。我有一个筛选器部分，该部分从屏幕顶部开始向下滑动，以免被按下按钮隐藏。最近，我在过滤器部分添加了一些部分，使其变得更大，不幸的是，这意味着它现在已部分显示在主图中，似乎存在故意的重叠，当过滤器在重叠的地方下降时会产生效果，并且是一种通缉的效果，但要等到按下该按钮之后。

我正在尝试将过滤器部分（engagementFilterContainer）置于屏幕之外，直到选择了过滤器部分为止。

布局有效：

<div engagement graph>

<engagement-filter>

<engagementgraph-container>

</div>

您会看到，有一个engagement-graphSVG占据了页面，但是engagement-filtercontainer进入了图形。

这是HTML布局：

<div class="Engagement-Graph" id="graph">
  <div class="Engagement-FilterContainer" [ngClass]="{ 'Engagement-FilterContainer--Visible': this.showFilter }">

  </div>
  <div class="Engagement-GraphContainer" [ngClass]="{'Engagement-GraphContainer--WithFilter': this.showFilter}">
    <svg
      class="Engagement-GraphSVG"
      xmlns="http://www.w3.org/2000/svg"
      version="1.1 ">
    </svg>
    <a
      class="Engagement-FeedbackButton"
      href="mailto:toplinksupport@weforum.org">
      {{ 'Send Feedback' | translate }}
    </a>
  </div>
</div>

如您所见，我的过滤器在图形容器的外部，该容器内包含了engagement-graphSVG。

当我尝试在SVG上设置位置时，engagement-filtercontainer并不包含在engagement-graphcontainer中。

CSS：

.Engagement-Graph {
position: absolute;
width: 100%;
height: 100%;
font-size: 100%;
vertical-align: baseline;
overflow: hidden;

@include tablet() {
  width: 65%;
}
}


.Engagement-FilterContainer {
  overflow: overlay;
  display: table;
  position: absolute;
  width: 100%;
  z-index: 10;
  transition: transform $filter-slide-duration;
  transform: translateY(-486px);

  &--Visible {
    transform: translateY(0) !important;
  }

  @include landscape {
    transform: translateY(-436px);
  }
  }


.Engagement-GraphContainer {
  position: relative;
  width: 100%;
  height: calc(100% - 56px);
  top: 0;
  background-color: $gray-bg-color;
  transition: height $filter-slide-duration, top $filter-slide-duration;

  @include tablet() {
    background-color: white;
    height: 100%;
  }

  svg {
    width: 100%;
    height: 100%;
  }

  &--WithFilter {
    height: calc(100% - 480px) !important;
    top: 480px !important;

    @include landscape {
      height: calc(100% - 436px) !important;
      top: 436px !important;
    }
  }
  }

我希望过滤器部分无论出现多大都不会出现在屏幕上，直到按下过滤器按钮为止。

谢谢您的帮助。

Answer 1

您可以使用CSS。在过滤器框上设置display:none，除非它具有“ opened”类：

.Engagement-FilterContainer {
   display: none
}

.Engagement-FilterContainer.opened {
    display: block
}

现在，当选择过滤器部分时，可以将“已打开”类添加到元素。