如何修复幻灯片导航 [英] How can I fix the slide navigation
本文介绍了如何修复幻灯片导航的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在处理此滑动菜单。
I working on this sliding menu. It can slide fine, but have problem to close it by clicking x.
let openNav = document.querySelector(".slideOpen");
let closeNav = document.querySelector(".slideClose");
document.addEventListener("click", () => {
openNav.style.width = "250px";
});
document.addEventListener("click", () => {
closeNav.style.width = "0";
});
.slideOpen { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; }
.slideOpen a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }
.slideOpen a:hover { color: #f1f1f1; }
.slideOpen .slideClose { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; }
<div style="font-size:30px;cursor:pointer">☰ open</div>
<div class="slideOpen"> <ul>
<li> <a href="#" class="slideClose">×</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">Services</a> </li>
<li> <a href="#">Clients</a> </li>
<li> <a href="#">Contact</a> </li>
</ul> </div>
推荐答案
您需要在按钮(链接)上而不是文档上添加actionListeners。
You need to add actionListeners on buttons(links) rather than on document.
let slide = document.querySelector(".slide");
let slideOpen = document.querySelector(".slideOpen");
let slideClose = document.querySelector(".slideClose");
slideOpen.addEventListener('click', function(event) {
slide.style.width = "250px";
});
slideClose.addEventListener("click", () => {
slide.style.width = "0";
});
.slide { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; }
.slide a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; }
.slide a:hover { color: #f1f1f1; }
.slide .slideClose { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; }
<div style="font-size:30px;cursor:pointer" class="slideOpen">☰ open</div>
<div class="slide"> <ul>
<li> <a href="#" class="slideClose">×</a> </li>
<li> <a href="#">About</a> </li>
<li> <a href="#">Services</a> </li>
<li> <a href="#">Clients</a> </li>
<li> <a href="#">Contact</a> </li>
</ul> </div>
这篇关于如何修复幻灯片导航的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文