如何在关闭的侧幻灯片导航上隐藏时间图标？
如何在关闭的侧幻灯片导航上隐藏时间图标？
提问于 2019-03-26 04:52:53
我正在定制一个购物模板，我已经从头开始创建了颜色选择器。现在我已经创建了一个关闭滑动侧边导航的X按钮，我想把X按钮放在sidenav外面，但是当侧边导航关闭时，按钮仍然在那里。我尝试向其添加较低的z-index，并向header添加较高的z-index，但不起作用。我将非常感谢你的帮助。
开放侧导航：
封闭侧导航：
正如您所看到的，在关闭sidenav之后，X按钮仍然存在。
My HTML:
<div class="sidetimes">
<i class="fas fa-times" style="font-size: 30px;"></i>
</div>My 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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-26 08:23:54
我猜你是在用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">×</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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55346234
复制相关文章
相似问题
腾讯云开发者
