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

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

我试图将过滤器部分（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:[email protected]">
      {{ '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;
    }
  }
  }

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

谢谢您的帮助。

最佳答案

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

.Engagement-FilterContainer {
   display: none
}

.Engagement-FilterContainer.opened {
    display: block
}

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

关于javascript - Div显示在页面上，除非按下按钮，否则不显示，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53373902/