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

Question

我有一个宽度和高度为 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: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
}

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