javascript - 单击列表项(javascript、css、html)后关闭导航菜单
问题描述
我为移动用户构建了一个导航菜单。我希望菜单在单击列表项后立即关闭。这怎么可能?
$(document).ready(function() {
$('.menu-toggle').click(function() {
$('header nav').toggleClass('active');
});
});
header {
display: block;
left: 0px;
border-radius: 0px;
width: 100%;
height: 50px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
top: 0;
right: 0;
background: white;
z-index: 2;
}
header nav {
position: fixed;
width: 100%;
height: calc(100vh - 50px);
background-color: #ffffff;
top: 50px;
left: 0;
transition: 0.5s;
}
header nav.active {
left: -100%;
}
header nav ul li {
float: none;
display: block;
padding-bottom: 15px;
text-align: center;
font-size: 25px;
font-family: 'Roboto', sans-serif;
font-weight: lighter;
}
header nav ul li a {
font-size: 25px;
}
header nav ul a li:hover {
padding-top: 0px;
color: #3ECB8A;
}
.menu-toggle {
display: block;
margin-right: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<nav id="main-nav" class="active">
<ul>
<a href="#">
<li>Home</li>
</a>
<a href="#about">
<li>About</li>
</a>
<a href="#work">
<li>Work</li>
</a>
<a href="#contact">
<li>Contact</li>
</a>
</ul>
</nav>
<div class="menu-toggle">
<i class="fa fa-bars">icon</i>
</div>
</header>
解决方案
您可以点击链接并在显示/隐藏菜单时切换活动类。例如:
$('header nav a').click(function(){
$('header nav').toggleClass('active');
})
推荐阅读
- idris - 在确保终止的同时键入级别固定点
- javascript - 如何使用 Javascript 删除有序列表?
- python - 如何在 BS4 中为多个容器使用循环时从容器中提取多行?
- ruby-on-rails - 在 redis 中使用 ZINCRBY 存储哈希
- python - Pylint e1101:“reddit”类没有“subreddit”成员
- javascript - 对嵌套在数组中的对象进行排序的高效算法
- android - android NDK:找不到执行点
- laravel - Laravel 5.7 在 domain.com 和 www.domain.com 之间共享 cookie
- python - ansible 显示 python 脚本打印
- docker-compose - 如何为 nightwatch-api 以前的 nightwatch-cucumber 传递浏览器 env 参数?