我为我的网站建立了一个导航栏。这个代码是从另一个网站带来的。这里是css
* {
padding:0;
margin:0;
}
body {
font-family:Verdana, Geneva, sans-serif;
font-size:18px;
background-color:#FFF
}
header {
width:100%;
background-color:#06C;
z-index:1000;
}
.menu-bar {
color:#FFF;
font-size:26px;
cursor:pointer;
padding:10px 12px;
margin-left:10px;
margin-top:5px;
margin-bottom:5px;
}
.menu-bar:hover {
background-color:rgba(0, 0, 0, 0.1);
border-radius:50px;
}
#tag-menu {
display:none;
}
#tag-menu:checked ~ div.drawer {
animation: slide-in 0.5s ease;
animation-fill-mode: forwards;
}
.drawer {
position:fixed;
left:-280px;
background-color:#06C;
height:100%;
z-index:100;
width:200px;
animation: slide-out 0.5s ease;
animation-fill-mode: forwards;
}
.drawer ul li {
list-style:none;
}
.drawer ul li a {
padding:10px 30px;
text-decoration:none;
display:block;
color:#FFF;
border-top:1px solid #039;
}
.drawer ul li a:hover{
background-color:rgba(0, 0, 0, 0.1);
}
.drawer ul li a i {
width:50px;
height:35px;
text-align:center;
padding-top:15px;
}
@keyframes slide-in {
from {left: -280px;}
to {left: 0;}
}
@keyframes slide-out {
from {left: 0;}
to {left: -280px;}
}
这里是HTML
<header>
<input type="checkbox" id="tag-menu">
<label class="fa fa-bars menu-bar" for="tag-menu"></label>
<div class="drawer" id="drawer">
<nav class="overlay-menu">
<ul>
<li><a href="#"><i class="fa fa-user-secret"></i>A</a></li>
<li><a href="#"><i class="fa fa-check-circle-o"></i>B</a></li>
<li><a href="#"><i class="fa fa-user-circle"></i>C</a></li>
<li><a href="#"><i class="fa fa-info-circle "></i>D</a></li>
</ul>
</nav>
</div>
我的问题是，在点击菜单项后，导航栏抽屉菜单不会关闭。我需要在点击抽屉菜单上的任何项目后关闭抽屉。如何解决这个问题。我可以使用哪些脚本？。非常感谢你的帮助。感谢
演示在这里：http://androidcss.com/demos/css/css-drawer-menu/#
我稍微简化了代码，因为：
- ，这样以后当您想添加其他内容时可以有更大的灵活性
- 你的导航菜单将从一开始就关闭，而不是像之前使用的代码那样在1秒后关闭
- 58行代码，而不是125行
它还将为您提供一个介绍jQuery的机会。
请查看解释每行代码的注释，如果您不理解，请写一条注释。
要玩的Codepen：https://codepen.io/larrytherabbit/pen/NWrGMWE
$("#hamburger").click(function(){
$("nav").toggleClass('open', 'close');
});
$("a").click(function(){
$("nav").toggleClass('open', 'close');
});
header, nav {
background-color:#06C;font-family:'Open Sans';
}
header {
width:100%;display:flex;align-items:center;
height:80px;color:#FFF;justify-content:flex-start;
} /* we use flex display to position the hamburger icon on the side of the AndroiCSS h2 element */
#hamburger {
cursor:pointer;
} /* add the small hand cursor pointer to indicate this element is clickable; it triggers the jQuery on click */
header * {
margin:0 15px;
}
.fa-bars, header h2 {
font-size:28px!important;
}
header h2 {
font-weight:400!important;
}
nav {
display:flex;flex-direction:column;width:0;align-items:center;
transition:width 0.2s ease;
}
nav.open {
width:250px;
}
nav.close {
width:0;
}
nav * {
color:#FFF!important;font-family:'Open Sans';font-size:20px!important;margin-right:15px;
}
nav a {
text-decoration:none!important;
border-top:0.5px solid gray;width:100%;text-align:center;display:flex;align-items:center;justify-content:center;height:55px;
}
nav a:hover {
background-color:rgba(0, 0, 0, 0.1);
} /* this changes the bg color on hover over the nav element */<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css drawer menu demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <!-- this loads the font aswesome library for the hamburger icon (fa-bars) and the social icons; the class 'fa' calls the font awesome library and the fa-xxx class calls the specific icon needed-->
<header>
<i id="hamburger" class="fa fa-bars"></i>
<h2>AndroidCSS</h2>
</header>
<nav>
<a href="javascript:void(0)"><i class="fa fa-facebook"></i> <span>Facebook</span></a> <!-- nav menu no need for <ul> or <li> tags here -->
<!-- the <a> tags are link tags and the <i> tags are used to call font awesome icons again -->
<a href="javascript:void(0)"><i class="fa fa-facebook"></i><span>Facebook</span></a>
<a href="javascript:void(0)"><i class="fa fa-facebook"></i><span>Facebook</span></a>
<a href="javascript:void(0)"><i class="fa fa-facebook"></i><span>Facebook</span></a>
<a href="http://www.reddit.com"><i class="fa fa-facebook"></i><span>Facebook</span></a>
</nav>