javascript - 如何修复幻灯片导航
问题描述
我正在研究这个滑动菜单。它可以很好地滑动,但是通过单击 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。
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>
推荐阅读
- r - Rstudio 谷歌分析 API
- angular - 如何使 ng new 命令不需要互联网来创建 angular2 项目?
- java - LargePageHeapSizeThreshold 是否激活 JVM 中的 UseTransparentHugePage?
- sql - 计算昼夜班次
- json - 卷曲:无效的 JSON
- r - 如何使变异与数字列名的反应性一起工作?
- pandas - 如何在熊猫中进行此操作
- angular - Angular中兄弟组件之间的事件通信
- php - 使用 xampp 时,Fontawesome 无法在 laravel 上正确显示
- php - 将 MySQL 语法用于 INSERT INTO SET 和 ON DUPLICATE KEY UPDATE (具有相同的列集)是否可能且安全?