javascript - 如何在封闭的侧滑导航中隐藏时间图标？

Question

我正在自定义一个 Shopify 模板，并且我从头开始创建了颜色选择器。现在我已经创建了一个关闭滑动侧边导航的 X 按钮，我想将 X 按钮放在 sidenav 之外，但是当侧边导航关闭时按钮仍然存在。我试过向它添加一个较低的 z-index，并向标题添加一个较高的 z-index，但它没有用。我将非常感谢您的帮助。

打开侧边导航:

封闭式侧导航:

如您所见，关闭 sidenav 后 X 按钮仍然存在。

我的 HTML:

<div class="sidetimes">

<i class="fas fa-times" style="font-size: 30px;"></i>

</div>

我的 CSS:

.sidetimes {
padding: 11px 30px 11px 10px;
background: #07c;
display: inline-block;
width: 27px;
border-radius: 0 5px 5px 0;
color: #fff;
cursor: pointer;
box-shadow: -10px 5px 14px 0px #444;
-webkit-box-shadow: 3px 5px 14px 0px #444;
-webkit-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0);
-webkit-animation: sliding-panel-close-button-in .4s forwards;
animation: sliding-panel-close-button-in .4s forwards;
-webkit-animation-delay: .3s;
animation-delay: .3s;
position: fixed;
z-index: 9999;
top: 36px;
margin-left: 39.5px;
}

Answer 1

我假设您正在使用 Javascript 来控制此动画？如果是这样，解决方案是在菜单“打开”时切换 body 上的类

看例子

$(".open-icon, .close-icon").click(function(e){
  $("body").toggleClass("menu-open");
});

nav {
  position: fixed;
  top: 0;
  left: -100%;
  transition: 0.5s;
  height: 100%;
}

.nav-wrap {
  position: relative;
  width: 200px;
  background-color: #efefef;
  padding: 10px;
  height: 100%;
}

nav ul {
  list-style: none;
  padding-left: 0;
}

nav ul li {
  padding: 5px;
}

body.menu-open nav {
  left: 0;
}

body.menu-open .open-icon {
  display: none;
}

body.menu-open .close-icon {
  display: block;
}

.close-icon {
  position: absolute;
  top: 0;
  right: -30px;
  margin: 0;
  background-color: #000;
  color: #fff;
  padding: 10px;
  font-size: 20px;
  cursor: pointer;
  line-height: 100%;
  display: none;
}

.open-icon {
  background-color: #000;
  color: #fff;
  padding: 10px;
  font-size: 10px;
  cursor: pointer;
  line-height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<span class="open-icon">MENU</span>
<nav>
  <div class="nav-wrap">
    <p class="close-icon">&times;</p>
    <ul>
      <li><a href="#">Menu item 1</a></li>
      <li><a href="#">Menu item 2</a></li>
      <li><a href="#">Menu item 3</a></li>
      <li><a href="#">Menu item 4</a></li>
      <li><a href="#">Menu item 5</a></li>
      <li><a href="#">Menu item 6</a></li>
      <li><a href="#">Menu item 7</a></li>
      <li><a href="#">Menu item 8</a></li>
    </ul>
  </div>
</nav>