javascript - 单击菜单项后导航栏抽屉菜单未关闭
问题描述
我为我的网站构建了一个导航栏。此代码来自另一个站点。这里是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>
我的问题是导航栏抽屉菜单在单击菜单项后没有关闭。单击抽屉菜单上的任何项目后,我需要关闭抽屉。如何解决这个问题呢。我可以使用哪些脚本?非常感谢您的帮助。谢谢
解决方案
我稍微简化了代码,因为:
- 这样您以后想要添加其他内容时可以有更大的灵活性。
- 您的导航菜单将从一开始就关闭,而不是像之前使用的代码那样在 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>
推荐阅读
- python - 如何重新排列数据文件中的行
- multithreading - Windows CE 中的线程和进程是如何实现的?
- c# - C# 在执行操作之前锁定集合中的每个对象
- wordpress - 在 WordPress 中,如何重写自定义帖子类型 URL 以使用漂亮的永久链接结构
- docker - 错误:在 alpine docker 映像上安装 pip 包时,命令“gcc”失败,退出状态为 1
- c# - 由于包含数据库,安装文件在其他计算机上不起作用
- regex - 字符串中准确价格的正则表达式
- r - 使用 R map 命令时如何调试或解决“损坏的 x”错误?
- php - 如何在同一个脚本中进行两个 curl 调用
- python - 如何从外部模块模拟 base_class?