时间戳

首页 > 解决方案 > 如何在特定滑块中隐藏 CSS 类？

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

问题描述

我正在使用顶部带有汉堡菜单的引导滑块，并且我想在除第一张幻灯片之外的每张幻灯片中显示它。除了第一张幻灯片之外，我是否必须在每张幻灯片中都使用这个汉堡类？或者有更简单的方法来做到这一点？任何形式的帮助将不胜感激

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);
}

标签： javascriptjqueryhtmlcssbootstrap-4

解决方案

推荐阅读