我的单页网站上有一个响应式菜单,当单击汉堡包图标时,它会显示一个透明的全屏菜单。当用户单击右上角的关闭按钮 (X) 时,全屏菜单将关闭,因此一切正常。但由于我的网站大部分都是一页,菜单中的所有链接也是同一页面内的链接。当用户单击其中一个链接时,页面会按预期跳转到那里,但透明全屏菜单仍保持全屏状态...
当用户单击链接时,菜单应该消失,就像用户单击关闭按钮一样。这是我试图解决的问题,我确信它只需要几行 Javascript,但我对 JS 不太熟悉。
这是网站:
这是相关代码(也许还有更多内容,不确定):
HTML
<div class="menu-btn"></div>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#work">Work</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
CSS
.menu-btn {
cursor: pointer;
height: 60px;
width: 60px;
display: inline;
z-index: 99;
position: absolute;
top: 2px;
right: 5%;
}
.close-btn {
position: fixed;
z-index: 100;
}
nav {
position: fixed;
top: -1600px;
left: 0;
right: 0;
background-color: rgba(0,26,51,0.95);
transition: all 0.5s;
color: white;
min-height: 100%;
z-index: 99;
}
.open {
top: 0;
}
JS
$(document).ready(function(){
$('.menu-btn').click(function(){
$('nav').toggleClass('open');
$(this).toggleClass('close-btn');
$('.container').toggle();
})
})
更新:当单击链接时,我设法关闭全屏菜单(带有下面的js),但它也使菜单按钮完全消失。所以我还需要一个英雄来把它带回来!
$(document).ready(function(){
$('nav li a').click(function(){
$('nav').toggle();
})
})
谢谢!
最佳答案
似乎不太理想如何处理单击事件,但因为您只是在单击它时寻找切换(用于关闭和打开),所以您可以将链接单击与触发菜单单击结合起来,如下所示:
$('nav li a').on('click', function(){
$('.menu-btn').trigger('click');
});
不过,我确实建议您为导航使用 ID 或特定类别。如果您在网站的其他位置添加了带有无序链接列表的导航元素,它很容易就会崩溃。
关于javascript - 当用户单击链接时如何关闭响应式全屏菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34706800/