如何在封闭侧幻灯片导航中隐藏时间图标？

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>