Javascript 如何在封闭式幻灯片导航上隐藏时间图标？

我正在定制Shopify模板，我从头开始创建了颜色选择器。现在我已经创建了一个X按钮，它关闭滑动侧导航，我想把X按钮放在sidenav之外，但是当侧导航关闭时，按钮仍然在那里。我试着给它添加一个较低的z索引，给标题添加一个较高的z索引，但都不起作用。我将非常感谢你的帮助

开放式侧导航：

<div class="sidetimes">

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

</div>

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

封闭侧导航：

<div class="sidetimes">

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

</div>

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

正如您所看到的，X按钮在sidenav关闭后保持不变

我的HTML:

<div class="sidetimes">

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

</div>

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

---

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

主体上的类

参见示例


$（“.打开图标，.关闭图标”）。单击（功能（e）{
$（“body”）.toggleClass（“菜单打开”）；
});
nav{
位置：固定；
排名：0；
左-100%；
过渡：0.5s；
身高：100%；
}
.导航包裹{
位置：相对位置；
宽度：200px；
背景色：#EFEF；
填充：10px；
身高：100%；
}
导航ul{
列表样式：无；
左侧填充：0；
}
李国荣{
填充物：5px；
}
body.menu-open导航{
左：0；
}
body.menu-open.open图标{
显示：无；
}
body.menu-open.close图标{
显示：块；
}
.关闭图标{
位置：绝对位置；
排名：0；
右：-30px；
保证金：0；
背景色：#000；
颜色：#fff；
填充：10px；
字体大小：20px；
光标：指针；
线高：100%；
显示：无；
}
.打开图标{
背景色：#000；
颜色：#fff；
填充：10px；
字体大小：10px；
光标：指针；
线高：100%；
}

菜单
×










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

参见示例


$（“.打开图标，.关闭图标”）。单击（功能（e）{
$（“body”）.toggleClass（“菜单打开”）；
});
nav{
位置：固定；
排名：0；
左-100%；
过渡：0.5s；
身高：100%；
}
.导航包裹{
位置：相对位置；
宽度：200px；
背景色：#EFEF；
填充：10px；
身高：100%；
}
导航ul{
列表样式：无；
左侧填充：0；
}
李国荣{
填充物：5px；
}
body.menu-open导航{
左：0；
}
body.menu-open.open图标{
显示：无；
}
body.menu-open.close图标{
显示：块；
}
.关闭图标{
位置：绝对位置；
排名：0；
右：-30px；
保证金：0；
背景色：#000；
颜色：#fff；
填充：10px；
字体大小：20px；
光标：指针；
线高：100%；
显示：无；
}
.打开图标{
背景色：#000；
颜色：#fff；
填充：10px；
字体大小：10px；
光标：指针；
线高：100%；
}

菜单
×










我在屏幕截图产品页面中找不到此侧面板，我在那里找到了您的侧面板的工作示例？谢谢这个主题在预览版上，因为它没有展示给你。我正在研究一个新主题，我想这只是一个预览。如果你是互联网，我可以给你的凭据，这样你就可以登录并查看代码。谢谢我在截图产品页面中找不到这个侧面板，我在那里找到了你们侧面板的工作示例？谢谢这个主题在预览版上，因为它没有展示给你。我正在研究一个新主题，我想这只是一个预览。如果你是互联网，我可以给你的凭据，这样你就可以登录并查看代码。谢谢，我已经亲自做了，我也是这样做的。但是谢谢你的帮助！我对帮助你一点也不后悔；）我已经自己做了，我也是这样做的。但是谢谢你的帮助！我对帮助你一点也不后悔；）