Question

我使用的是带有顶部汉堡菜单的引导滑块，我希望在除第一个幻灯片之外的所有幻灯片中显示它。除第一个幻灯片外，是否需要在每个幻灯片中使用此汉堡包类？还是有更简单的方法做到这一点？任何帮助将不胜感激

HTML：

<body>
  <div class="navigation">
     <div class="burger_deluxe">
        <span class="burger_global top_bun"></span>
        <span class="burger_global patty"></span>
        <span class="burger_global bottom_bun"></span>
     </div>
  </div>


   <div class="carousel-item first_slide">
   </div>
   <div class="carousel-item second_slide">
   </div>
   <div class="carousel-item third_slide">
   </div>
</body>

CSS：

.navigation {
  width: 100%;
  height: 60px;
  z-index: 400;
  position: absolute;
}
  .burger_deluxe {
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
  width: 34px;
  height: 40px;
  z-index: 3;
}
.burger_deluxe .burger_global {
  position: absolute;
  border-top: 5px solid white;
  width: 100%;
}
.burger_deluxe .burger_global.top_bun {
  top: 0;
  border-radius: 20px;
  transition: transform 500ms ease, border 500ms ease;
  transform-origin: left center;
}
.burger_deluxe .burger_global.patty {
  top: 12px;
  border-radius: 20px;
  transition: opacity 500ms ease;
}
.burger_deluxe .burger_global.bottom_bun {
  top: 24px;
  border-radius: 20px;
  transition: transform 500ms ease, border 500ms ease;
  transform-origin: left center;
}
.burger_deluxe.open span {
  border-color: white;
}
.burger_deluxe.open .top_bun {
  transform: rotate(45deg);
}
.burger_deluxe.open .patty {
  opacity: 0;
}
.burger_deluxe.open .bottom_bun {
  transform: rotate(-45deg);
}

如何在特定的滑块中隐藏CSS类？

0 个答案: